Кнопки редактирования и удаления не отображаются на странице

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.