Angular 8 使用 ngIf 和异步管道来显示和隐藏 HTML 元素

Question

我正在尝试根据服务结果显示和隐藏 HTML 元素。我正在使用，*ngIf="messageService.getData() | async"但无法显示或隐藏元素。我正在使用异步，否则会在短时间内显示“失败消息”，然后显示“成功消息”。我有 2 个这样的标签：<div *ngIf="messageService.getData() | async">Successful Message</div><div *ngIf="!messageService.getData() | async">Failure Message</div>在服务中，我有一个这样的代码：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);  }}

Answer 1

在您的服务中：

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>

Answer 2

这是一种错误的async管道用法，不是在语法上而是在语义上。每次触发更改检测时，您都会发出 HTTP 请求。

async您可以存储两个标志（布尔变量）或一个用于 HTTP 请求的布尔变量和一个用于响应的变量，而不是使用管道检查。

下面的示例使用两个标志。

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>

Answer 3

当您可以只在组件中分配数据时，为什么还要使用异步管道呢？

// 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>

您的服务存在错误。如果你map不返回任何东西就使用，你最终不会得到任何数据。tap如果要进行日志记录，请使用：

// message.service.ts

public getData() {

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

  .pipe(

    tap((response) => {

      console.log("success");

    }),

    catchError(this.handleError)

  )

}