时间戳

首页 > 解决方案 > Angular Material Table：提供的数据源与数组、Observable 或 DataSource 不匹配

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

问题描述

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

错误：提供的数据源与数组、Observable 或 DataSource 不匹配

搜索服务.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 });

  }

组件.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
}

结果.ts

export interface Result {
    //grid
    ReportName: string;
    Business: number;
    Location: string;
}

结果-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>

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

标签： angulartypescriptapihttp-post

解决方案

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

推荐阅读