Блог

Основная цель: создать таблицу на основе данных JSON

  <mat-table class="mat-elevation-z8" *ngIf="carrierRates" [dataSource]="carrierRates">
        <ng-container *ngFor="let columnName of columnsList" matColumnDef="{{columnName}}">
            <mat-header-cell *matHeaderCellDef>{{columnName}}</mat-header-cell>
            <mat-cell *matCellDef="let itemRate">
                {{itemRate.$columnName}}
            </mat-cell>
            <mat-footer-cell *matFooterCellDef></mat-footer-cell>
        </ng-container>
<mat-header-row *matHeaderRowDef="columnsList;"></mat-header-row>
        <mat-row *matRowDef="let row; columns: columnsList;"></mat-row>
        <mat-footer-row *matFooterRowDef="columnsList;"></mat-footer-row>

    </mat-table>
 

Вопрос 1:
Как я буду запускать два цикла for, один для чтения списка столбцов, а другой для чтения источника данных?

Вопрос 2: Как мне передать значение ColumnName в этой строке {{itemRate.$columnName}}

К вашему сведению: ColumnName — это список КЛЮЧЕЙ данных JSON

 {"planId":"abcd",
"rateAreaId":"lmpo",
"singleMonthly":0,
"twoPeopleMonthly":0,
"familyMonthly":0}
 

1. Вам не нужно выполнять 2 цикла foor, но вы должны определять только шаблоны для столбцов и строк.

Каждому определению столбца должно быть присвоено уникальное имя и содержать содержимое для его заголовков и ячеек строк. Вот простое определение столбца с именем planId . Ячейка заголовка содержит текст «Идентификатор плана«, и каждая ячейка строки будет отображать planId свойство данных каждой строки.

 <ng-container matColumnDef="planId">
  <th mat-header-cell *matHeaderCellDef> Plan ID</th>
  <td mat-cell *matCellDef="let itemRate"> {{itemRate.planId}} </td>
</ng-container>
 

и так далее для остальных имен / значений столбцов.

2. Ваши имена столбцов planId , rateAreaId , singleMonthly , twoPeopleMonthly , familyMonthly . Это означает, что в вашем компонентном файле вы должны создать переменную columnList , содержащую список столбцов, которые вы хотите отобразить, например, следующее:

columnList = [planId, rateAreaId, singleMonthly, twoPeopleMonthly, familyMonthly];

Затем, как и вы, добавьте mat-header-row и mat-row к содержимому вашего mat-table и предоставьте свои columnList данные в качестве входных данных.

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

Обратите внимание: этот список столбцов, предоставленных строкам, может быть в любом порядке, не обязательно в том порядке, в котором вы написали определения столбцов. Кроме того, вам не обязательно включать каждый столбец, который был определен в вашем шаблоне.

Это означает, что, изменив список столбцов, предоставленный строкам, вы можете легко изменять порядок и динамически включать / исключать столбцы.

В любом случае, я просто скопировал некоторую часть всеобъемлющей документации angular material table 😉