Блог

Я использовал nztable из ngzorro пакета. Я попытался использовать расширяемую строку. Когда я попробовал тот же код из примера, приведенного на веб-сайте, расширяемая строка не работает должным образом. Расширенная строка отображается в одном <td> , а не в целом <tr> . Я не знаю, чего мне не хватает.

app.component.html

 <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed">
  <thead>
    <tr>
      <th nzShowExpand nzWidth="60px"></th>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let data of nzTable.data">
      <tr>
        <td nzShowExpand [nzExpand]="expandSet.has(data.id)" (nzExpandChange)="onExpandChange(data.id, $event)"></td>
        <td>{{ data.name }}</td>
        <td>{{ data.age }}</td>
        <td>{{ data.address }}</td>
      </tr>
      <tr [nzExpand]="expandSet.has(data.id)">
        <span>{{ data.description }}</span>
      </tr>
    </ng-container>
  </tbody>
</nz-table>
  

app.component.ts

   onExpandChange(id: number, checked: boolean): void {
    if (checked) {
      this.expandSet.add(id);
    } else {
      this.expandSet.delete(id);
    }
  }
  listOfData = [
    {
      id: 1,
      name: 'John Brown',
      age: 32,
      expand: false,
      address: 'New York No. 1 Lake Park',
      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'
    },
    {
      id: 2,
      name: 'Jim Green',
      age: 42,
      expand: false,
      address: 'London No. 1 Lake Park',
      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
    },
    {
      id: 3,
      name: 'Joe Black',
      age: 32,
      expand: false,
      address: 'Sidney No. 1 Lake Park',
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'
    }
  ];
  

Нажмите здесь, чтобы просмотреть результат моего кода