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 : Empclass[];

varEmp should be an array of Empclass.  Table [dataSource] needs an array.


Write Answer










©2024 concretepage.com | Privacy Policy | Contact Us