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

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Angular 8 使用 ngIf 和異步管道來顯示和隱藏 HTML 元素

Angular 8 使用 ngIf 和異步管道來顯示和隱藏 HTML 元素

慕桂英546537 2021-11-12 17:41:44
我正在嘗試根據(jù)服務(wù)結(jié)果顯示和隱藏 HTML 元素。我正在使用，*ngIf="messageService.getData() | async"但無法顯示或隱藏元素。我正在使用異步，否則會在短時間內(nèi)顯示“失敗消息”，然后顯示“成功消息”。我有 2 個這樣的標(biāo)簽：<div *ngIf="messageService.getData() | async">Successful Message</div><div *ngIf="!messageService.getData() | async">Failure Message</div>在服務(wù)中，我有一個這樣的代碼：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)驗 獲得超6個贊

在您的服務(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>


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

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

這是一種錯誤的async管道用法，不是在語法上而是在語義上。每次觸發(fā)更改檢測時，您都會發(fā)出 HTTP 請求。


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


下面的示例使用兩個標(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>


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

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

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


// 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ù)存在錯誤。如果你map不返回任何東西就使用，你最終不會得到任何數(shù)據(jù)。tap如果要進(jìn)行日志記錄，請使用：


// message.service.ts


public getData() {

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

  .pipe(

    tap((response) => {

      console.log("success");

    }),

    catchError(this.handleError)

  )

}


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

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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