角材料表不渲染列

Question

我一直在绞尽脑汁，并与已经完成的工作实现进行比较，但是由于某种原因，我<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将其简化为仅几列，并删除了我的排序和分页器，以尝试使其正常运行。

我的控制器是：

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开发人员工具检查表格时，元素为空。

因此，我认为可能存在与displayedColumns属性绑定的问题，但找不到该问题。控制台中也没有错误。

TIA

Answer 1

更改

displayedColumns: [
    'Supplier',
    'ContainerNo',
    'InvoiceNum',
    'VesselName'
];

至

displayedColumns =  [
    'Supplier',
    'ContainerNo',
    'InvoiceNum',
    'VesselName'
];