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

我试图显示来自web服务的信息，但收到以下错误“error TypeError:无法读取undefined的属性'bu'。但是，我希望显示的数据显示正确。下面是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

{{item.id}
更新

TS

ngOnInit（）：void{
this.http.get（this.api.getBU（））.subscribe（数据=>{
this.vals=数据；
});
}

您需要使用安全导航操作符或*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>

{{item？.id}
更新

编辑

如注释中所述，在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>

{{item.id}
更新

您需要使用安全导航操作符或*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>

{{item？.id}
更新

编辑

如注释中所述，在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>

{{item.id}
更新

您应该为

vals？.bu使用安全导航操作符。因为您正在异步获取
VAL

<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>



{{item.id}
更新


您应该为
vals？.bu使用安全导航操作符。因为您正在异步获取
VAL

<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>



{{item.id}
更新


谢谢，但我收到了此错误“”[Angular]解析器错误：在[item？.bunit=$event]第13列的赋值中不能使用“？”运算符，请将其从ngModel*ngFor=“let item of vals？.bu”>@eohdev中删除。我已经回答了这个问题。请核对一下。你为什么不先在回答中加上呢。该评论仅出现在我的回答之后。谢谢，但我得到了以下错误“”[Angular]解析器错误：“？”运算符不能用于[item？.bunit=$event]第13列的赋值中。请将其从ngModel*ngFor=“let item of vals？.bu”>@eohdev中删除。我已经回答了这个问题。请核对一下。你为什么不先在回答中加上呢。那个评论是在我回答之后才发表的。