角度数组：错误类型错误：无法读取未定义的属性答案

【问题标题】：Angular array: ERROR TypeError: Cannot read property of undefined角度数组：错误类型错误：无法读取未定义的属性
【发布时间】：2018-06-07 04:08:51
【问题描述】：

我正在尝试显示来自 Web 服务的信息，但收到以下错误 “ERROR TypeError: Cannot read property 'bu' of undefined”。但是，我希望显示的数据正确显示。这是 Web 服务响应和代码的副本。

{
    "bu": [
           {
            "id": 1,
            "bcluster": "R03 - Information Technology",
            "bsector": "P20 - CA SA",
            "bgroup": "319 - ITM as a Service (passthrough)",
            "bunit": "-"
           },
           {
            "id": 2,
            "bcluster": "R03 - Information Technology",
            "bsector": "Q04 - Information Management & Applications",
            "bgroup": "P36 - Softworks",
            "bunit": "001 - Softworks Licence & Maintenanc"
           }
         ]
}

HTML

  <ul class="list-group"  *ngFor="let item of vals.bu">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <button type="button" class="btn btn-info">{{item.id}}</button>
        <input type="text" class="input-group btn btn-light" [(ngModel)]="item.bunit">
      <button type="button" class="btn btn-primary">Update</button>
    </li>
  </ul>

  ngOnInit(): void {
    this.http.get<DataResponse>(this.api.getBU()).subscribe(data => {
      this.vals = data;
    });
  }

【问题讨论】：

标签： javascript arrays json angular

【解决方案1】：

您需要使用安全导航运算符或 *ngIf 来处理异步请求的响应延迟，

 <button type="button" class="btn btn-info">{{item?.id}}</button>
        <input type="text" class="input-group btn btn-light" [(ngModel)]="item?.bunit">
      <button type="button" class="btn btn-primary">Update</button>
    </li>

编辑

如评论中所述，在您的 ngFor 中处理 null 并在 ngModel 中将其删除

<ul class="list-group"  *ngFor="let item of vals?.bu">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <button type="button" class="btn btn-info">{{item.id}}</button>
        <input type="text" class="input-group btn btn-light" [(ngModel)]="item.bunit">
      <button type="button" class="btn btn-primary">Update</button>
    </li>
</ul>

【讨论】：

谢谢，但我收到此错误 ''[Angular] Parser Error: The '?.'运算符不能用于 [item?.bunit=$event] 中第 13 列的赋值
从 ngModel 中移除
*ngFor="let item of vals?.bu">
@eohdev 我已经回答了。请检查。
您为什么不先在答案中添加它。那条评论是在我回答之后才出现的。

【解决方案2】：

您应该对vals?.bu 使用安全导航运算符。因为您正在异步获取vals。

<ul class="list-group"  *ngFor="let item of vals?.bu">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <button type="button" class="btn btn-info">{{item.id}}</button>
        <input type="text" class="input-group btn btn-light" [(ngModel)]="item.bunit">
      <button type="button" class="btn btn-primary">Update</button>
    </li>
  </ul>

【讨论】：