编辑和删除按钮没有显示在页面上了

Question

我在我的component.html下面的代码。所有对象都显示除了列“行动” ERGO按钮编辑页面上并删除不存在。为什么会是这样？在控制台上没有错误。我使用"@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指令。