Filling an angular table with data from http request - json

Question

I am creating a table in angular and wish to fill it with data coming from an url . I have created a table following a tutorial. Code
dataSource : Parameters[]
getData(floor) {
console.log('Making a request')
this.vavService.getVavData(floor)
.subscribe(
(data11: any) => {
console.log(data11);
this.dataSource = data11;
console.log(this.dataSource)
}
)
}
parameters class
export class Parameters {
'date' : string;
'deviceID' : string;
'nvo_air_damper_position' : string;
'nvo_airflow' : string;
'nvo_temperature_sensor_pps' : string;
'timestamp' : string;
'vavID' : number;
'miloID' : string;
'miloTemperature' : number;
}
html code
<div>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="deviceID">
<mat-header-cell *matHeaderCellDef>DeviceID</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="damper">
<mat-header-cell *matHeaderCellDef>Damper Position</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="airflow">
<mat-header-cell *matHeaderCellDef>Air Flow</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="temperature">
<mat-header-cell *matHeaderCellDef>Temperature</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="time">
<mat-header-cell *matHeaderCellDef>TimeStamp</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="vavID">
<mat-header-cell *matHeaderCellDef>VAV ID</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<!-- <ng-container matColumnDef="miloID">
<mat-header-cell *matHeaderCellDef>Milo ID</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container>
<ng-container matColumnDef="miloTemperature">
<mat-header-cell *matHeaderCellDef>Milo Temperature</mat-header-cell>
<mat-cell *matCellDef="let policy"></mat-cell>
</ng-container> -->
<mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: tableColumns"></mat-row>
</mat-table>
</div>
when i load the component, api call is successful and i can see the data in the console. Also I see the table headers in the browser
0: {date: "2019-12-03", deviceId: "fd00::212:4b00:1957:d616", nvo_air_damper_position: "100.0", nvo_airflow: "0.0", nvo_temperature_sensor_pps: "327.6700134277344", …}
1: {date: "2019-12-03", deviceId: "fd00::212:4b00:1957:d616", nvo_air_damper_position: "100.0", nvo_airflow: "0.0", nvo_temperature_sensor_pps: "327.6700134277344", …}
But the data binding is not happening. Can someone help me with binding the data. Thanks

Answer 1

Try this, hope it helps:
Set the correct dataSource type:
dataSource: MatTableDatsSource<Parameters> = new MatTableDataSource<Parameters>([]);
and set the data like:
this.dataSource.data = data11;

Answer 2

I think you have to reference your table and call the renderRows() function when you use the data that way instead of using MatTableDataSource because initialy your value is empty and filled when your observable emit a value.
If a data array is provided, the table must be notified when the array's objects are added, removed, or moved. This can be done by calling the renderRows() function which will render the diff since the last table render. If the data array reference is changed, the table will automatically trigger an update to the rows.
At mat-table tag, add #table1 <mat-table #table1>
In your component
Add #ViewChild('table1', {static: false}) table: MatTable<any>;
Then after your set the data, call this.table.renderRows();