角度* ngFor循环时出错

Question

我有单个对象的JSON，如下所示：

我通过调用component.ts文件中的API来获得这些数据，如下所示：

/* for auditgorup selecitonm */
this.http.get('http://localhost:8080/api/selections/getAllAuditGroupSelections')
  .subscribe((datas: any[]) => {
    this.auditSelection = datas;
    console.log(this.auditSelection);

    // You'll have to wait that changeDetection occurs and projects data into 
    // the HTML template, you can ask Angular to that for you ;-)
    this.chRef1.detectChanges();

    // Now you can use jQuery DataTables :
    const tables: any = $('#nepal');
    this.dataTable = tables.DataTable();
  });

视图如下

<table id="nepal" class="table table-bodered">
  <thead>
    <tr>
      <th>Selection No</th>
      <th>SelectionDate</th>
      <th>SelectedBy</th>
      <th>PanEximNumber</th>
      <th>Name</th>
      <th>Address</th>
      <th>PhoneNumber</th>
      <th>SelectionType</th>
      <th>Group Desc</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let nas of auditSelection">
      <td>{{nas.selectionId}}</td>
      <td>{{nas.selectionDate}}</td>
      <td>{{nas.selectedBy}}</td>
      <td>{{nas.panEximNumber}}</td>
      <td>{{nas.name}}</td>
      <td>{{nas.address}}</td>
      <td>{{nas.phoneNumber}}</td>
      <td>{{nas.selectionType}}</td>
      <td>{{nas.assignmentAudit.auditorGroup.groupDesc}}</td>
    </tr>
  </tbody>
</table>

在<td>{{nas.assignmentAudit.auditorGroup.groupDesc}}</td>的最后一行中，我无法获得所需的值。

输出显示应为“ g1”。

Answer 1

我无法发表评论，因此请在此处添加。 assignmentAudit是一个数组，因此请尝试使用索引进行访问

Answer 2

根据JSON结构的分析，assignmentAudit是一个数组 因此您只能使用索引位置访问它。

如果您确定assignmentAudit是具有单个值的数组，则可以使用

<td>
  {{nas.assignmentAudit[0].auditorGroup.groupDesc}}
</td>

如果assignmentAudit具有多个值并且不确定，则可以尝试

<td>
   <span *ngFor="let assignmentAudit of nas.assignmentAudit">
     {{assignmentAudit.auditorGroup.groupDesc}}
   </span>
</td>

Answer 3

nas.assignmentAudit[0].auditorGroup.groupDesc

那行得通。您尝试访问的部分是一个数组。因此，选择第一个索引即可对其进行定义

Answer 4

groupDesc在auditorGroup循环内，所以您不能喜欢在循环内获取价值。那样尝试。

<!-- Angular -->
<ul>
  <li *ngFor="let item of nas.assignmentAudit.auditorGroup;">

  </li>
</ul>

或<td>{{nas.assignmentAudit.auditorGroup[0].groupDesc}}</td>