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>

我把它剥离到只有几列并删除了我的排序和分页器，以便尝试使其正常工作。

我的控制器是：

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 Developer Tools检查表时，元素为空。

因此，我认为这是一个绑定到displayedColumns属性的问题，但我找不到问题。此外，控制台中也没有错误。

TIA

Answer 1

更改

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

到

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

角度材质表不渲染列

1 个答案: