Как связать childArray внутри ParentArray (вложенный) в mat-table

Question

Предположим, у меня есть элементов массив, содержащий 2 элемента.

var elements = [{ _id: 1, name: 'Paul Walker' },
    { _id: 2, name: 'Lisa' }];

Тогда у меня есть элементы массива массив, содержащий элементов массив

var arrayelements = [];
    arrayelements.push(elements);

я знаю, что могу привязать elements массив непосредственно к источнику данных, но как я могу привязать массив arrayelemnts к источнику данных таблицы mat, чтобы показать содержимое элементы массив.

this.dataSource = new MatTableDataSource(arrayelements);

Я пробовал это STACKBLITZ , но не смог получить все элементы в элементах массиве

Answer 1

@ Алексис прав, вы помещаете массив в массив. Вместо этого вы можете попытаться объединить массивы, для получения дополнительной информации посмотрите, например, здесь: Копирование элементов массива в другой массив

Тогда ваш код будет выглядеть следующим образом: Соответствующая часть Компонент

ngOnInit() {
  var elements = [{ _id: 1, name: 'Paul Walker' },
    { _id: 2, name: 'Lisa' }];
  var arrayelements = [];
  arrayelements = arrayelements.concat(elements);
  this.dataSource = new MatTableDataSource(arrayelements);
  this.dataSource.sort = this.sort;
}

Шаблон

  <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" >

  <!-- Position Column -->
  <ng-container matColumnDef="_id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    <td mat-cell *matCellDef="let element"> {{element._id}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

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