我一直在绞尽脑汁,并与已经完成的工作实现进行比较,但是由于某种原因,我的<mat-table>
没有呈现列或标题。
我已经在这个项目中实现了几次,所以我知道我有正确的导入以及一切正常运行所需的一切。
我的HTML如下:
<div class="indexBlock">
<div id="inputs">
<mat-form-field id="filterFormField">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<div id="tableDiv">
<mat-table #matTable [dataSource]="unconfDataSource">
<ng-container matColumnDef="Supplier">
<mat-header-cell *matHeaderCellDef>Supplier</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.Supplier}}</mat-cell>
</ng-container>
<ng-container matColumnDef="ContainerNo">
<mat-header-cell *matHeaderCellDef>Container No</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.ContainerNo}}</mat-cell>
</ng-container>
<ng-container matColumnDef="InvoiceNum">
<mat-header-cell *matHeaderCellDef>Invoice Num</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.InvoiceNum}}</mat-cell>
</ng-container>
<ng-container matColumnDef="VesselName">
<mat-header-cell *matHeaderCellDef>Vessel Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.VesselName}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let myRowData; columns: displayedColumns" (click)="SelectImport(myRowData)"></mat-row>
</mat-table>
</div>
</div>
Ive将其简化为仅几列,并删除了我的排序和分页器,以尝试使其正常运行。
我的 Controller 是:
export class UnconfirmedComponent implements OnInit {
unconfDataSource: MatTableDataSource<ImportHead>;
displayedColumns: [
'Supplier',
'ContainerNo',
'InvoiceNum',
'VesselName'
];
constructor(private _importService: ImportService,
private _router: Router) { }
ngOnInit() {
this.GetImports();
}
GetImports() {
this._importService.GetUnconfirmedImports()
.subscribe(imports => {
this.unconfDataSource = new MatTableDataSource<ImportHead>(imports);
});
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.unconfDataSource.filter = filterValue;
}
SelectImport(event) {
this._router.navigate(['/detail/' + event.Id]);
}
}
我知道
myRowData
中的<mat-row>
包含正确的数据,因为当我单击一行时,它会使用该数据正确导航。但是,这是结果:
它显示正确的行数,没有标题或实际数据。当我使用F12开发人员工具检查表格时,元素为空。
因此,我认为可能存在绑定(bind)到
displayedColumns
属性的问题,但是我找不到该问题。控制台中也没有错误。TIA
最佳答案
改变
displayedColumns: [
'Supplier',
'ContainerNo',
'InvoiceNum',
'VesselName'
];
至
displayedColumns = [
'Supplier',
'ContainerNo',
'InvoiceNum',
'VesselName'
];
关于 Angular Material 表不渲染列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49895296/