Angular ngIf 问题 - html 未呈现 - 数据存在

Question

我在从 API.

检索数据后显示在我的页面上时遇到问题

API 正在返回对象数组，所以我有多个 *ngIf，以便知道要显示什么 html div。重要的是说 API 并不是每次都返回所有对象，这取决于数据。

问题是，在第一次调用 API 后，html 会正确呈现，并且所有内容都会按应有的方式显示。在第二次调用时（输入参数现在当然不同了），API 返回不同的数据（更多对象），但是 HTML 是相同的，所以我缺少几个 div在页面上。如果我刷新页面并再次调用 API，我会得到很好的呈现 html.

console.log(this.data) 总是显示正确的信息。

我尝试使用在 SO 上找到的 this.changeDetector.detectChanges() 和 this.ngZone.run 解决方案，但这并没有解决我的问题。

还有什么我可以尝试的吗？

这是我的代码示例：

this.repoService.getData(а, b)
 .subscribe(res => {
   this.data = res as ApiData;
})

而且我有几个这样的 if，对于每个对象

if (this.data.objectA === undefined || this.data.objectA.length === 0) {
            this.objectAExist = false;
}

export interface ApiData {
    objectA: aData[];
    objectB: bData[];
    objectC: cData[];
    objectD: dData[];

我也有几个 div 这样的 ngIf 和 ngFor。

<div *ngIf="objectAExist">
    <div *ngFor="let item of data.objectA">
      <div>
         <p>Label 1</p>
         <p>Label 2</p>
         <p>Label 3</p>
      </div>
    <div>
         <p>{{ item.Id }}</p>
         <p>{{ item.Name }}</p>
         <p>{{ item.Description }}</p>
         </div>
   </div>
</div>

Answer 1

我已通过将逻辑移至 html 部分来解决此问题。

我替换了这个

<div *ngIf="objectAExist">

有了这个

<div *ngIf="data.objectA.length > 0">

一切正常。

Angular ngIf 问题 - html 未呈现 - 数据存在

Angular ngIf problem - html not rendered - data exist

html

angular

angular-ng-if