Как перебрать тег ngcontainer в угловых 6

Question

Я пытаюсь создать таблицу с использованием углового материала, приведенный ниже код до сих пор работает нормально, но кажется, что он дублирует 'ng-container' для каждого столбца.Есть ли способ повторить это в Typescript?

HTML

<div class="example-container mat-elevation-z8">

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

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

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

Пожалуйста, предложите.

Answer 1

Вот код в машинописи.Вы можете конвертировать в угловые значения, используя NgFor keyPair pipe.

let element = {
  name: 'test 1',
  position: 0,
  weight: 500
};

for(let itemkey in element){

  console.log(elem);

  <ng-container matColumnDef="{{itemkey}}" sticky>
  <th mat-header-cell *matHeaderCellDef> {{itemkey.charAt(0).toUpperCase()}} </th>
  <td mat-cell *matCellDef="let element"> {{element[itemkey]}} </td>
  </ng-container>

}