Столик-ориентированный мат-стол
У меня есть ситуация, когда данные, которые я получаю от моего бэкэнда, ориентированы на столбцы. Вот пример того, как выглядят эти данные:
[
{ columnName: "ID", cells: [1, 2, 3, 4, 5] },
{ columnName: "Name", cells: ["a", "b", "c", "d", "e"] }
]
Пока мне удалось настроить свой мат-стол следующим образом:
<table mat-table [dataSource] = "data" class = "mat-elevation-z8">
<ng-container [matColumnDef] = "column" *ngFor = "let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef = "let element">{{element | json}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
<tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
</table>
что дает мне следующий результат:
а на самом деле хотелось бы видеть такую таблицу:
|------|------|
| ID | NAME |
|------|------|
| 1 | a |
| 2 | b |
| 3 | c |
| 4 | d |
| 5 | e |
Есть ли способ настроить matRowDef так, чтобы он определял свойство ячеек как строки? В идеале я просто хотел бы изменить это в таблице матов, чтобы мне не нужно было манипулировать своими данными, а затем преобразовывать их обратно.
Я добавил пример
вот попытка демонстрационная ссылка таким образом.
В вашей демонстрации не используется мат-стол.
да, я знаю, потому что я не очень разбираюсь в mat-table, поэтому я создаю демонстрацию с простой таблицей, пытаясь передать подход, который вы можете достичь желаемого результата. но все же позвольте мне попробовать с мат-столами
@ user2657943 вы это решили?
Я думаю, вам придется преобразовать данные (карту), прежде чем передавать их в таблицу. В таблице используется количество элементов в массиве dataSource, чтобы определить, сколько строк нужно отобразить.
Ответы 1
Вы можете попробовать, изменив существующий ответ в соответствии с вашими потребностями:
HTML-код:
<table mat-table [dataSource] = "dataSource" class = "mat-elevation-z8">
<ng-container [matColumnDef] = "column" *ngFor = "let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef = "let element"> {{element[column]}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
<tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
</table>
Код ТС:
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
const ELEMENT_DATA: any[] = [
{ columnName: "ID", cells: [1, 2, 3, 4, 5] },
{ columnName: "Name", cells: ["a", "b", "c", "d", "e"] }
];
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
displayedColumns = []
dataSource = new MatTableDataSource([]);
constructor() {
// Take Column names dynamically
ELEMENT_DATA.forEach(x => {
this.displayedColumns.push(x.columnName)
})
// Format the array as you want to display
let newlyFormedArray = ELEMENT_DATA.reduce((array, { columnName, cells }) => {
cells.forEach((cell, index) => {
array[index] = Object.assign({ [columnName]: cell }, array[index])
})
return array;
}, [])
this.dataSource = new MatTableDataSource(newlyFormedArray);
}
}
не могли бы вы объяснить, какой результат вы ожидаете после такого использования
JSON?