MatTable не работает должным образом на Angular 10

Question

Не уверен, что это потому, что я создаю этот проект с нуля, используя Angular Материал 10, и я еще не работал с ним, и он работает по-другому, или это потому, что я просто делаю что-то не так, но мат -table буквально сейчас даже не отображается на моей странице, и у меня такого никогда не было.

Код таблицы:

  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="actions">
  <th mat-header-cell *matHeaderCellDef>Actions</th>
  <td mat-cell *matCellDef="let row">
    <button (click)="edit(row.id)">EDIT</button>
    <button (click)="delete(row.id)">DELETE</button>
  </td>
</ng-container>

<ng-container matColumnDef="status">
  <th mat-header-cell *matHeaderCellDef>Status</th>
  <td mat-cell *matCellDef="let row">{{ row.status }}</td>
</ng-container>

<ng-container matColumnDef="browser">
  <th mat-header-cell *matHeaderCellDef>Weight</th>
  <td mat-cell *matCellDef="let row">{{ row.browser }}</td>
</ng-container>

<ng-container matColumnDef="origin">
  <th mat-header-cell *matHeaderCellDef>Symbol</th>
  <td mat-cell *matCellDef="let row">{{ row.origin }}</td>
</ng-container>

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

DataSource init + displayColumns:

  displayedColumns: ['actions', 'status', 'browser', 'origin'];
  dataSource = [];

  length = 100;
  pageSize = 10;
  pageSizeOptions: number[] = [5, 10, 25, 100];

  constructor(private logService: LogService, private dialog: MatDialog) {}

  ngOnInit(): void {
     this._loadData();
  }

 private _loadData(): void {
     const params = { size: this.pageSize, pageIndex: 0 };
     this.logService.loadData(params).subscribe((res) => {
         this.dataSource = res.content;
     });
}

Запрос работает правильно, и объект правильно получает информацию из него, это просто таблица не отображается ...

MatTableModule правильно импортирован в проект.

Я также пробовал буквально скопировать вставку кода из Angular материала stackblitz, но он тоже не работает.

Answer 1

Вы должны назначить displayedColums массиву, не определяя для него тип:

displayedColumns: ['actions', 'status', 'browser', 'origin'];
               ^^^
            replace : with =