#angular #typescript #angular-material
Вопрос:
У меня возникли проблемы с получением данных с помощью таблицы угловых материалов.
Это компонент
export class CertificateTableComponent {
dataSource: MatTableDataSource<any>;
//certificates: ValueEntity[] = [];
data: CertificateRow[] = [];
columns: string[] = ['name', 'id', 'type', 'publicCertificate'];
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, { static:true }) paginator: MatPaginator;
constructor(private _integrationAccountService: integrationAccountService) {
}
ngOnInit() {
this._integrationAccountService.getcertificates().subscribe(response => {
//this.certificates = response.data;
this.data = [];
if (response.value) {
for (let entity of response.value) {
let row: CertificateRow = {
name: entity.name,
id: entity.id,
type: entity.type,
publicCertificate: entity.properties?.publicCertificate
};
}
}
this.dataSource = new MatTableDataSource(this.data);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
})
}
}
Это таблица:
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{ row.name }}</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let row">{{ row.id }}</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
<td mat-cell *matCellDef="let row">{{ row.type }}</td>
</ng-container>
<ng-container matColumnDef="publicCertificate">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Public Certificate</th>
<td mat-cell *matCellDef="let row">{{ row.publicCertificate }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns"></tr>
<tr mat-row *matRowDef="let row; columns: columns;"></tr>
</table>
При проверке в консоли я вижу, что значения ответов правильные, но источник данных всегда кажется пустым. Не уверен, чего мне не хватает при передаче данных в таблицу.
Ответ №1:
Ваш код кажется прекрасным (по крайней мере, для меня), за исключением того, что вы забыли добавить сконструированный объект в data array
список.
this.data = [];
if (response.value) {
for (let entity of response.value) {
let row: CertificateRow = {
name: entity.name,
id: entity.id,
type: entity.type,
publicCertificate: entity.properties?.publicCertificate
};
this.data.push(row); // add here
}
}
Счастливого кодирования.. 🙂
Комментарии:
1. Это решило мою проблему, спасибо за помощь