第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

Angular 8 使用 ngIf 和異步管道來(lái)顯示和隱藏 HTML 元素

Angular 8 使用 ngIf 和異步管道來(lái)顯示和隱藏 HTML 元素

慕桂英546537 2021-11-12 17:41:44
我正在嘗試根據(jù)服務(wù)結(jié)果顯示和隱藏 HTML 元素。我正在使用，*ngIf="messageService.getData() | async"但無(wú)法顯示或隱藏元素。我正在使用異步，否則會(huì)在短時(shí)間內(nèi)顯示“失敗消息”，然后顯示“成功消息”。我有 2 個(gè)這樣的標(biāo)簽：<div *ngIf="messageService.getData() | async">Successful Message</div><div *ngIf="!messageService.getData() | async">Failure Message</div>在服務(wù)中，我有一個(gè)這樣的代碼：export class MessageService {  constructor(private http: HttpClient) { }  public getData() {    return this.http.get("https://jsonplaceholder.typicode.com/todos/1")    .pipe(      map((response) => {        console.log("success");      }),      catchError(this.handleError)    )  }  private handleError(error: Response) {    console.log("handleError")    let errMsg: string;    errMsg = "error"    return Observable.throw(errMsg);  }}
查看完整描述

3 回答

?
慕妹3242003

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊

在您的服務(wù)中：


public getData() {

    return this.http.get("https://jsonplaceholder.typicode.com/todos/1")

    .pipe(

      map((response) => {

        return response; // return res

      }),

      catchError(this.handleError)

    )

  }

在您的組件中：


export class MessageComponent implements OnInit {

  isServiceAPIWorking: boolean;

  todos;

  loadingError$ = new Subject<boolean>();

  constructor(private messageService: MessageService) { }


  ngOnInit() {

    this.todos = this.messageService.getData().pipe(

      catchError((error) => {

        // it's important that we log an error here.

        // Otherwise you won't see an error in the console.

        console.error('error loading the list of users', error);

        this.loadingError$.next(true);

        return of();

      })

    );

  }

}

在你的 html 中：


<div>Show Message:</div>

<div *ngIf="todos | async">Successfull Message</div>

<div *ngIf="loadingError$ | async">Failure Message</div>


查看完整回答
反對(duì) 回復(fù) 2021-11-12
?
守候你守候我

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊

這是一種錯(cuò)誤的async管道用法，不是在語(yǔ)法上而是在語(yǔ)義上。每次觸發(fā)更改檢測(cè)時(shí)，您都會(huì)發(fā)出 HTTP 請(qǐng)求。


async您可以存儲(chǔ)兩個(gè)標(biāo)志（布爾變量）或一個(gè)用于 HTTP 請(qǐng)求的布爾變量和一個(gè)用于響應(yīng)的變量，而不是使用管道檢查。


下面的示例使用兩個(gè)標(biāo)志。


export class MessageService {


  isLoaded = false;

  hasError  = false;


  constructor(private http: HttpClient) { }


  public getData() {

    this.isLoaded = false;

    this.http.get("https://jsonplaceholder.typicode.com/todos/1")

    .subscribe(

       (response) => {

           this.hasError = false;

           this.isLoaded = true;

       },

       (error) => {  

           this.hasError = true;

           this.isLoaded = true;

       },

    )

  }

}

在模板中：


<ng-container *ngIf="isLoaded">

    <div *ngIf="!hasError">Successfull Message</div>

    <div *ngIf="hasError">Failure Message</div>

</ng-container>


查看完整回答
反對(duì) 回復(fù) 2021-11-12
?
大話西游666

TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超14個(gè)贊

當(dāng)您可以只在組件中分配數(shù)據(jù)時(shí)，為什么還要使用異步管道呢？


// message.component.ts


class MessageComponent implements OnInit {

  isServiceAPIWorking: boolean;

  data: any;

  constructor(private messageService: MessageService) { }


  ngOnInit() {

    this.messageService.getData()

      .subscribe(response => {

        this.isServiceAPIWorking = true;

        // Assign the data

        this.data = response;

      },

        error => {

          this.isServiceAPIWorking = false;

        })

  }

}

// message.component.html


<div>Show Message:</div>

<div *ngIf="data">Successfull Message</div>

<div *ngIf="!data">Failure Message</div>

您的服務(wù)存在錯(cuò)誤。如果你map不返回任何東西就使用，你最終不會(huì)得到任何數(shù)據(jù)。tap如果要進(jìn)行日志記錄，請(qǐng)使用：


// message.service.ts


public getData() {

  return this.http.get("https://jsonplaceholder.typicode.com/todos/1")

  .pipe(

    tap((response) => {

      console.log("success");

    }),

    catchError(this.handleError)

  )

}


查看完整回答
反對(duì) 回復(fù) 2021-11-12
  • 3 回答
  • 0 關(guān)注
  • 316 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)