Question

我的component.html中包含以下代码。除“动作”列外，所有对象均显示在页面上，没有“编辑”和“删除”按钮。为什么会这样呢？控制台上没有错误。我正在使用"@angular/material": "^7.3.0"。谢谢。

<div>
  <br>
  <mat-card>
    <button mat-raised-button color="primary" routerLink="/add"> Create New Book </button>
    <br><br>
    <mat-divider></mat-divider>
    <br>
    <table mat-table [dataSource]="books">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>Book Id</th>
        <td mat-cell *matCellDef="let element">{{element.id}} </td>
      </ng-container>

      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef>Title</th>
        <td mat-cell *matCellDef="let element">{{element.title}} </td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>Actions</th>
        <td mat-cell *matCellDef="let element">
          <button mat-button color="primary" (click)="editBook(element.id)">Edit </button>
          <button mat-button color="warn" (click)="deleteBook(element.id)">Delete</button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

    </table>
  </mat-card>
</div>

Answer 1

解决方案是确保分配给*matHeaderRowDef的数组包含应显示的列名。列名使用matColumnDef伪指令分配。

编辑和删除按钮未显示在页面上

1 个答案: