источник данных устанавливает в таблицу mat (angular) данные, но не отображает никаких данных и таблица пуста

Question

Источник данных mat table (angular) содержит данные (массив с одной строкой), но отображает только заголовок и таблица пуста.

Проблема в том, что консоль в ngOnInit показывает данные, а моя таблицапусто и отображает только заголовок.Что не так с моим простым кодом?

Код в html-файле моего компонента:

<div class="mat-elevation-z8 show-feature">
  <mat-table #table [dataSource]="samples">
    <!-- from Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef = "let row">
        {{row.name}}
      </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef='displayedColumns'>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-header-row>
  </mat-table>
</div>

Код в файле ts моего компонента:

export class SpliceConnectionsAttributeControl implements 
        AfterContentInit, OnInit, OnDestroy {


  samples: Samples[];
  displayedColumns = ['name'];

  constructor() { }

  ngOnInit() {
    this.samples = [{name: 'test1'}];
    console.log(this.samples);
  }

  ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }

  ngAfterContentInit() { }
}

Модель:

export class Samples {
  name: string ;
}

Answer 1

Ваш mat-row элемент находится внутри вашего mat-header-row элемента.См https://material.angular.io/components/table/overview https://stackblitz.com/edit/angular-3jszti

Answer 2

Ваш синтаксис шаблона неправильный, вы должны использовать теги table, th, tr и td с угловыми директивами материала:

<table mat-table #table [dataSource]="samples">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
     <td mat-cell *matCellDef="let row">
       {{row.name}}
     </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef='displayedColumns'></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

DEMO: STACKBLITZ