Angular Material Table: 提供的数据源与数组、Observable 或 DataSource 不匹配

Question

我正在使用 angular material table，但由于以下错误，我无法填充网格：

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;
}

结果网格。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>

我无法意识到我做错了什么...我以相同的方式填充下拉列表并且没有问题，但是使用此 Material 网格是不可能的..任何的想法？谢谢！

Answer 1

您必须将 gridSubmittedFilesList 初始化为一个空数组，因为它现在是 null 或者只是为此 table 设置 *ngIf 直到 gridSubmittedFilesList.length !== 0

Angular Material Table: 提供的数据源与数组、Observable 或 DataSource 不匹配

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

api

http-post

typescript

angular