由于 API 响应延迟，Angular 9 Ngif 给出错误输出

Question

如果这不是精心设计的，我深表歉意。我是新来的。所以我已经组装了我的第一个 SPA 并进行了部署，但是由于第三方 API 的响应延迟，使用 Ngif 会给出错误的输出。我正在使用“haveibeenpwned”API 来检索有关特定数据泄露的信息。问题是，如果确实存在违规，由于延迟，它仍然显示“未发现违规！”首先在实际显示适当的违规信息之前。我正在使用 Ngif 检查响应数组是否为空，显然由于延迟响应，它会显示没有发现违规，因为输出数组一开始是空的。

我可以在不使用视图模板的 Ngif 的情况下以另一种方式捕捉它吗？所以我的代码如下：

<div *ngIf="breachData.length > 0">
  <div *ngFor="let item of breachData; let i = index">
    <img src="{{item.LogoPath}}" alt="{{item.Name}}" class="small-logo mb-2">
    <p><strong>Breach Name:</strong> {{item.Name}}</p>
    <p><strong>Date of breach:</strong> {{item.BreachDate | date : "dd/MM/y"}}</p>
    <p><strong>Description:</strong></p>
    <p [innerHTML]="item.Description"></p>
  </div>
</div>

<div *ngIf="!breachData.length">
  <p>No breach found!</p>
</div>

我在生成它时使用的是 Angular 9，我丢失了部分代码，如果这看起来不太正确，我深表歉意，但基本上我使用了 ngIf 和 ngElse。是否可以在视图中输出之前捕获它？就像在 Breachcomponent.component.ts 中说的那样？因为我确实使用以下内容：

this.breachData.push(data);

这是破解组件的代码：

import { Component, OnInit } from '@angular/core';
import {HibpService} from "../hibp.service";
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-breachcomponent',
  templateUrl: './breachcomponent.component.html',
  styleUrls: ['./breachcomponent.component.css']
})
export class BreachcomponentComponent implements OnInit {
  breach;
  public breachData = [];

  constructor(private hibpService: HibpService, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.hibpService.showBreachInfo(params.get('breachName')).subscribe((data) => {
        this.breachData.push(data);
        console.log(this.breachData);
      });
    })
  }

}

抱歉，如果其中很多内容含糊不清。我对 Angular 很陌生，这是我的第一个应用程序。

任何帮助表示赞赏。请不要将此标记为不受欢迎，因为我是初学者。

Answer 1

您可以拥有另一个名为 loaded 的属性，并在加载数据后将其设置为 true

this.breachData.push(data);
this.loading = true;

你的 ngIf 看起来像

<div *ngIf="loading && breachData.length">