Provided data source did not match an array, Observable, or DataSource at getTableUnknownDataSourceError
Asked on August 11, 2018
With out Angular Materail it is working fine
<table>
<tr>
<th>City</th>
<th>State</th>
</tr>
<tr>
<td>{{ varEmp?.address.City}}</td>
<td>{{ varEmp?.address.State}}</td>
</tr>
</table>
With Angular Material it is not Working
<table mat-table [dataSource]="varEmp" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="City">
<th mat-header-cell *matHeaderCellDef> City</th>
<td mat-cell *matCellDef="let element"> {{element?.address.City}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="lowestAsk">
<th mat-header-cell *matHeaderCellDef> State</th>
<td mat-cell *matCellDef="let element"> {{element?.address.State}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
In component I declared var
displayedColumns: string[] = ['last','lowestAsk','highestBid', 'high24hr'];
Thanks in advance
Replied on August 12, 2018
In the code
<table mat-table [dataSource]="varEmp" class="mat-elevation-z8">
</table>
varEmp should be an array.
How are you defining varEmp? [dataSource] needs an array.
Replied on August 12, 2018
<ng-container matColumnDef="State">
<th mat-header-cell *matHeaderCellDef> State</th>
<td mat-cell *matCellDef="let element"> {{element?.address.State}} </td>
</ng-container>
In component I declared variable
displayedColumns: string[] = ['City','State'];
varEmp : Empclass; //varEmp is class type variable briefy described component code to reduce complexity
Json Object
{"address":
{"City": "Karwar", "State": "Karnataka"}
}Replied on August 12, 2018
varEmp should be an array.
varEmp should be an array of Empclass. Table [dataSource] needs an array.
