如何修复 nz-table 删除角度中无数据显示的问题

Question

这是代码：

<nz-table #listTable nzSize="middle" [nzData]="data">
      <thead>
        <tr>
          <th nzShowExpand></th>
          <th>Location</th>
          <th>Device</th>
          <th class="tbWidth text-center">Actions</th>
        </tr>
      </thead>
      <tbody>
        <ng-template ngFor let-data [ngForOf]="listTable.data">
          <tr>
            <td nzShowExpand [(nzExpand)]="mapOfExpandData[data.id]"></td>
            <td nzBreakWord [textContent]="data.name"></td>
            <td nzBreakWord [textContent]="data.device"></td>
            <td nzBreakWord class="text-center">
              <nz-button-group>
                <button nz-button nzType="primary" (click)="openFormDrawer(data)"><i nz-icon nzType="edit"
                    nzTheme="outline"></i></button>
                <button nz-button nzType="danger" (click)="deleteRoomData(data)"><i nz-icon nzType="delete"
                    nzTheme="outline"></i></button>
              </nz-button-group>
            </td>
          </tr>
          <tr [nzExpand]="mapOfExpandData[data.id]">
            <td></td>
            <td colspan=7>
              <nz-table>
                <thead>
                  <tr>
                    <th nzWidth="25%">Location Code</th>
                    <th nzWidth="25%">Location Description</th>
                    <th nzWidth="25%">Device Code</th>
                    <th nzWidth="25%">Device Description</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td nzBreakWord [textContent]="data.locationCode"></td>
                    <td nzBreakWord [textContent]="data.locationDescription"></td>
                    <td nzBreakWord [textContent]="data.deviceCode"></td>
                    <td nzBreakWord [textContent]="data.deviceDescription"></td>
                  </tr>
                </tbody>
              </nz-table>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </nz-table>

为什么一直显示“无数据”？

如何去除ng zorro中无数据显示？因为有数据但总是显示“NO DATA”，如何删除 Angular Zorro 中的“NO DATA”？

展开正在工作，但是当单击展开时，也会显示“无数据”，但 nz 表内有数据。

如果有数据则不显示，如果没有数据则显示。但即使有数据它也会显示。

Answer 1

只需添加[nzData]="['']"到您的子表中即可

nzData当该消息为空时可见nz-table

<nz-table [nzData]="['']">
  <thead>
  <tr>
    <th nzWidth="25%">Location Code</th>
    <th nzWidth="25%">Location Description</th>
    <th nzWidth="25%">Device Code</th>
    <th nzWidth="25%">Device Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td nzBreakWord [textContent]="data.locationCode"></td>
    <td nzBreakWord [textContent]="data.locationDescription"></td>
    <td nzBreakWord [textContent]="data.deviceCode"></td>
    <td nzBreakWord [textContent]="data.deviceDescription"></td>
  </tr>
  </tbody>
</nz-table>

Answer 2

只需添加nzTemplateMode到您的 nz 表中即可

<nz-table nzTemplateMode>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
   
  </tbody>
</nz-table>