Angular 当我更新S显示的数据时，为什么我的垫表用户界面没有更新

我有一个表，它使用数组keyData中的数据，我想按下一个按钮，向该数据添加一行.

从console.logs中，我可以看出keyData数组插入了额外的行，但这并没有反映在UI中.

以下是该网页的内容:

<mat-tab label="Keys">
  <button mat-fab extended (click)="onAddKey()">
    <mat-icon>add</mat-icon>
    Add Key
  </button>

  <table mat-table [dataSource]="keyData" #keyTable class="mat-elevation-z8 demo-table">
    <ng-container matColumnDef="active">
      <th mat-header-cell *matHeaderCellDef> Active </th>
      <td mat-cell *matCellDef="let element"> {{element.active}} </td>
    </ng-container>

    <ng-container matColumnDef="key-id">
      <th mat-header-cell *matHeaderCellDef> Key ID </th>
      <td mat-cell *matCellDef="let element"> {{element.key_id}} </td>
    </ng-container>

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

    <ng-container matColumnDef="checkbox">
      <th mat-header-cell *matHeaderCellDef>
        <input type="checkbox">
      </th>
      <td mat-cell *matCellDef="let element"> </td>
    </ng-container>

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

以下是组件:

@Component({
  selector: 'app-policies',
  standalone: true,
  imports: [CommonModule, MatCheckboxModule, MatIconModule, MatCardModule, MatTabsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSidenavModule, MatTableModule],
  templateUrl: './policies.component.html',
  styleUrl: './policies.component.scss',
  changeDetection: ChangeDetectionStrategy.Default
})
export class PoliciesComponent {
  @ViewChild(MatTable) keyTable!: MatTable<any>;

  keyColmuns: string[] = ["active", "key-id", "description"]
  keyData: any = []

  constructor(
    private endpointService: EndpointService,
  ) { }

  onAddKey() {
    const newKeyId = Math.random().toString(36).slice(-10)

    this.endpointService.makeRequest({
      params: {
        key_id: newKeyId,
        policy_id: this.openedRow.policy_id,
      },
      method: "aaaaaaaaaaaa"
    },
      "aaaaaaaaaa"
    ).subscribe({
      next: (value: any) => {
        console.log('value', value)
        this.keyData.push({
          active: 1,
          api_set_key: value.result.api_set_key,
          description: "",
          key_id: newKeyId,
        })
        // A new row is being inserted here but this is not displayed in the UI until I refresh the page.
        this.keyTable.renderRows();
        console.log('this.keyData', this.keyData)
      },
      error: err => {
        console.error('Error:', err)
      },
    })

  }

我也试过从ChangeDetectorRef分跑到detectChanges();分，但也没有奏效.