Angular Material Table: Provided data source did not match an array, Observable, or DataSource

Question

I'm working with angular material table, and im not able to populate the grid yet due to below error:

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 not able to realize what I'm doing wrong... I did the same way in order to populate dropdownLists and no issues, but with this Material grid it is not possible.. Any idea? Thank you!

Sorry but I don't see the declaration for this.gridSubmittedFilesList in ResultGridComponent ; where is that part? Also here's a link that may help... dev.to/jwp/angular-material-table-in-20-minutes-15f4 — JWP
– JWP, Commented Oct 21, 2020 at 14:31

Igor Nowosad · Accepted Answer · 2020-10-26 14:25:51Z

1

You have to initialize gridSubmittedFilesList as an empty array because it's null now or just set *ngIf for this table until gridSubmittedFilesList.length !== 0

answered Oct 26, 2020 at 14:25

Igor Nowosad

6795 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material Table: Provided data source did not match an array, Observable, or DataSource

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related