How to fix the nz-table remove the no data display in angular

user_12772967 0
Viewed 3490

here's the code:

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

Why the "NO DATA" keep showing? enter image description here

How to remove the no data display in ng zorro? cause there's a data but the "NO DATA" is always displaying, How to remove the "NO DATA" in angular zorro?

the expand is working, but when it click the expand the "NO DATA" also display, but there's a data inside the nz-table.

if there's a data it shouldn't display, if there's no data it will display. but even there's a data it also display.

angular typescript javascript
2 Answers

Simply add [nzData]="['']" to your subtable

This messag is visible when nzData is empty in 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>
user_99406090

Just add nzTemplateMode to your nz-table

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