arrays - 如何处理 Angular 7 中数据不均匀的 JSON 对象？

Question

服务以这种格式返回数据。我可以在开发者工具栏中看到数据。

{"results":{"BindGridDatatable":[{"ID":"0005","Name":"Rohit"}, 
                             {"ID":"0006","Name":"Rahul"}], 
        "Totalvalue":119}}

在组件中我是这样接收的

 btnSearch(){ 

 this.service.postControlResult(this.myForm.value).subscribe(
  (res: Response)=> {
    this.data = res ;       
   },err => console.error(err)
 );
  }

在 HTML 文件中，我尝试了多种方式来显示我的数据，例如

<div class="table">
<div class="row" *ngFor="let d of data  ">
 {{d.BindGridDatatable.ID}}
</div>
</div>

和

<div class="table">
<div class="row" *ngFor="let d of data.BindGridDatatable   ">
 {{d}}
</div>
 </div>

我只想将 BindGridDatatable 绑定(bind)到 this.data 对象，我想将 Totalvalue 存储在单独的变量中。

我收到错误 TypeError: Cannot read property 'BindGridDatatable' of undefined

Answer 1

根据您的结果，您需要像这样迭代 -

<div class="table">
  <div class="row" *ngFor="let d of data?.results?.BindGridDatatable">
    {{d?.ID}} - {{d?.Name}} 
  </div>
</div>

PS: The Angular safe navigation operator (?.) is a fluent and convenient way to guard against null and undefined values in property paths.

并且主要用于异步调用数据绑定(bind)，其中初始阶段变量值为 null 或未定义以避免此类问题，我们使用安全导航运算符 ?

有关的更多详细信息？

• https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths