Angular 5 Material Table not getting data from service

Question

I am trying to simply display data from a MySQL database using Angular (5) with a Material table. The code I have compiles successfully, and a table with the column names and pa

Answer 1

Try to use an elvis operator ? in the template to begin with. If it is just the template issue, that should get your problem solved.

[length]="unitTypeDatabase?.data?.length"

The reason is when the view is rendered there is no unitTypeDatabase defined yet as it is only initialized in the ngOnInit(). See if that fixes your issue.

Answer 2

The problem is in unit-type.service.ts. It should be:

getAllUnitTypes(): Observable<UnitType[]> {
    return this.http.get(this.unit_types_Url)
           .map(response => response.json() as UnitType[]);
}

I missed the fact that there was no data object as part of the returned JSON, so as soon as that was removed all the information was visible and correctly displayed in the table.