ngFor 表示延迟数据

Question

我有一个组件，它接受URL参数，调用API并显示数据。最基本和典型的示例：

ngOnInit() {
this.route.params.subscribe( params => { 
const id = params.id;     
this.loadAssets(id);
});
}
loadAssets(id)
{   
this.apiService.getAssetGroup(id).subscribe((data) => {
this.assetGroup  =  data;   
this.assetSubGroupList = data.assetSubGroupList;
console.log(this.assetGroup);
});
}

在我的html中，我做了一个简单的循环：

<div class="row">
<div class="col-sm-12 col-lg-12">
<div *ngFor="let subGroup of assetGroup.assetSubGroupList">
<div>SubGroup: {{subGroup.name}}</div>
<div *ngFor="let asset of subGroup.assetList">Asset: {{asset.name}}</div>
</div>
</div>
</div>

我想这是 Web 开发中最常见的一些场景。但是，我收到以下错误：

无法读取 Object.eval 上未定义的属性"assetSubGroupList" [作为更新指令](资产组件.html：5(

我最好的猜测是这是因为当页面加载时，资产组为空。加载数据后，页面实际上结束工作，但我不想要第一个错误。我认为在 Angular 中必须有一些处理这种情况的标准方法。你总是初始化变量，使用ngIf甚至更聪明的东西吗？

Answer 1

改用async管道。这样，您也不必照顾unsubcribe，通常建议这样做以避免任何内存泄漏。

只需在 TS 类中声明一个名为assetGroup$的属性(理想情况下，我们为可能为 Observable 类型的值添加$符号。这只是一个代码约定，您可以在此处阅读更多相关信息。然后在loadAssets函数中分配它，如下所示：

assetGroup$;
...
loadAssets(id) {
this.assetGroup$ = this.apiService.getAssetGroup(id);
}

然后在模板代码中像这样使用它：

<div class="row">
<div class="col-sm-12 col-lg-12">
<div *ngFor="let subGroup of (assetGroup$ | async).assetSubGroupList">
<div>SubGroup: {{subGroup.name}}</div>
<div *ngFor="let asset of subGroup.assetList">Asset: {{asset.name}}</div>
</div>
</div>
</div>

Answer 2

将?运算符添加到assetGroup

<div *ngFor="let subGroup of assetGroup?.assetSubGroupList">
<div>SubGroup: {{subGroup.name}}</div>
<div *ngFor="let asset of subGroup.assetList">Asset: {{asset.name}}</div>
</div>

Answer 3

确实是原因，一种方式，您可以使用此行this.assetSubGroupList = data.assetSubGroupList;进行迭代，因此<div *ngFor="let subGroup of assetSubGroupList">

或者您可以使用?运算符进行检查，如下所示

<div *ngFor="let subGroup of assetGroup?.assetSubGroupList">