时间戳

首页 > 解决方案 > ngFor 用于延迟数据

angular - ngFor 用于延迟数据

问题描述

我有一个组件，它接受 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 [as updateDirectives] (AssetsComponent.html:5) 处未定义的属性“assetSubGroupList”

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

标签： angular

解决方案

将运算符添加?到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>

推荐阅读