Having some trouble with an Angular Material table, as I'm encountering an error preventing me from populating the grid:
Error: Provided data source did not match an array, Observable, or DataSource
search.service.ts
GridSubmittedFilesList: IGridModel;
getFilesSubmitted(data: any): Observable<IGridModel> {
return this.http.post<IGridModel>(this._url, JSON.stringify(data),
{ headers: { 'Content-Type': 'application/json' }, withCredentials: true });
}
component.ts
export class ResultGridComponent implements OnInit {
constructor(private searchSubmissionService: SearchSubmissionService) { }
gridSubmittedFilesList: IGridModel;
displayedColumns = ['report', 'business', 'location'];
ngOnInit(): void {
this.searchSubmissionService.searchSource$.subscribe(
message => {
this.sendPostReq(message);
}
);
}
sendPostReq(data: any): any {
this.searchSubmissionService.getFilesSubmitted(data)
.subscribe(data => this.gridSubmittedFilesList = data
);
}
}
IGridModel.ts
import { Result } from './Result';
export interface IGridModel {
Result: Result
}
Result.ts
export interface Result {
//grid
ReportName: string;
Business: number;
Location: string;
}
result-grid.component.ts
<div class="mat-elevation-z8 div-expanded" style=" height: 58vh;">
<!-- [hidden]="dataSource.data.length==0" -->
<table mat-table [dataSource]="gridSubmittedFilesList" matSort
class="schedule-status-table">
<ng-container matColumnDef="report">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Request Id </th>
<td mat-cell *matCellDef="let row"> {{row.Result.ReportName}} </td>
</ng-container>
I'm struggling to figure out what's going wrong... DropdownLists work fine in a similar way, but populating this Material grid seems impossible. Any suggestions? Thank you!