Моя проблема аналогична обсуждаемой здесь , но ни одно из предложений там не помогло, и моя ситуация немного отличается.
У меня есть родительский компонент, назначающий массив для свойство input дочернего компонента, которое затем использует эти данные для создания источника данных для таблицы mat. Мой код похож на этот:
parent.component. html:
<mat-tab label="Accounts">
<app-accounts [accounts]="accountOwner?.accounts"></app-accounts>
</mat-tab>
child.component.ts:
@Component({ /// })
export class AppAccountComponent implements OnInit, OnChanges {
@Input() accounts: MyAccount[];
tableColumns: string[] = ['name', 'number', 'startDate', 'endDate'];
accountDataSource: MatTableDataSource<MyAccount>;
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor() {
// tried this as recommended in linked thread, but it had no effect:
// this.accountDataSource = new MatTableDataSource<MyAccount>();
}
ngOnInit(): void {
this.sort.active = 'name';
this.sort.direction = 'asc';
}
ngOnChanges(changes: SimpleChanges): void {
this.accountDataSource = new MatTableDataSource<MyAccount>(this.accounts);
this.accountDataSource.sort = this.sort;
this.accountDataSource.paginator = this.paginator;
}
}
child.component. html:
<table mat-table [dataSource]="accountsDataSource" class="mat-elevation-z1" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let account"> {{account.name}} </td>
</ng-container>
<ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Number </th>
<td mat-cell *matCellDef="let account"> {{account.number}} </td>
</ng-container>
<ng-container matColumnDef="startDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Effective Date </th>
<td mat-cell *matCellDef="let account"> {{account.startDate | date:'mediumDate'}} </td>
</ng-container>
<ng-container matColumnDef="endDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Expiration Date </th>
<td mat-cell *matCellDef="let account"> {{account.endDate | date:'mediumDate'}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" [disabled]="!accountsDataSource" [pageSize]="5" showFirstLastButtons>
</mat-paginator>
Интерфейс MyAccounts:
export interface MyAccount {
number: string;
name: string;
startDate: Date;
endDate?: Date;
}
Это действительно отображает данные правильно. Проблема заключается в следующем исключении в окне консоли:
Это исключение «длина свойства равна нулю» выглядит так, как будто оно исходит от MatTableDataSource._filterData().