NG-zorro表格给nzData传入Observable报不可迭代错误问题咨询

问题根因 #

• 第一个原因：async管道在Observable还没有发射出第一个有效值时，会默认返回null。你直接写[nzData]="tableData$ | async"时，初始阶段null会被直接传入nzData，而ng-zorro的nzData要求接收可迭代的数组类型，拿到null自然会抛出listOfData is not iterable的错误。而你用*ngIf="tableData$ | async as Table"的写法时，返回null的阶段nz-table组件根本不会被渲染，也就不会触发报错。
• 第二个原因：你定义的tableData$发射的是TableData类型的包装对象（从你的第一种写法能看到这个对象包含columns属性），而nzData需要接收的是表格行数据的数组，你把整个包装对象直接传给nzData，就算拿到了有效值，也不是数组类型，依然会报不可迭代的错误。另外你的第一种写法里根本没有给nz-table传入nzData属性，自然不会触发相关校验。

修复方案 #

你可以按照以下步骤修改代码即可实现你想要的写法：

1. 修正传入nzData的取值，从TableData对象中取出对应的行数据数组，同时处理空值情况，给空值默认赋值空数组：

<div *ngIf="visibleAggregate">
  <nz-table
    #aggregate
    id="activitiesTable"
    [nzData]="(tableData$ | async)?.data ?? []"
  >
    <thead>
      <tr>
        <th *ngFor="let column of (tableData$ | async)?.columns ?? []">
          {{ column.label }}
        </th>
      </tr>
    </thead>
  </nz-table>
</div>

如果你担心两次用async会产生两次订阅，可以在外层再加一层*ngIf缓存值：

<div *ngIf="visibleAggregate">
  <ng-container *ngIf="tableData$ | async as tableConfig">
    <nz-table
      #aggregate
      id="activitiesTable"
      [nzData]="tableConfig.data"
    >
      <thead>
        <tr>
          <th *ngFor="let column of tableConfig.columns">
            {{ column.label }}
          </th>
        </tr>
      </thead>
    </nz-table>
  </ng-container>
</div>

2. 可选优化：你现在的groupBySubject初始值是null，如果buildTableData方法接收null参数会返回非法结构，建议给groupBySubject设置合理的初始值，避免返回不符合预期的TableData结构。

内容的提问来源于stack exchange，提问作者Man24