Angular Material Table not rendering columns

Question

I've been racking my brain over this and comparing to already working implementations I have done, but for some reason, my <mat-table> is not rendering the columns or the headers.

I have implemented it a few times in this project already so I know I have the correct imports and everything needed in order for it to work.

My HTML is as follows:

<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 stripped it down to only a few columns and removed my sorting and paginator in order to try and get it working.

My Controller is:

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]);
    }
}

I know that myRowData in the <mat-row> contains the correct data as when I click a row, it navigates correctly using that data.

However, this is the result:

It displays the correct number of rows, just no headers or actual data. When I inspect the table using F12 Developer Tools, the elements are empty.

Therefore I assume theres an issue binding to maybe the displayedColumns property but I cannot find the issue. Also there are no errors in the Console.

TIA

Answer 1

Change

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

to

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