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

Question

我正在使用角度材料表，但由于以下错误，我还无法填充网格：

错误：提供的数据源与数组、Observable 或 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>

我无法意识到我做错了什么......我做了同样的方式来填充下拉列表并且没有问题，但是使用这个 Material 网格是不可能的......知道吗？谢谢！

Answer 1

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