Json 如何在Angular 5中为datatable实现数据源

我一直在努力学习所有的教程，以及我找到的答案，但我还是无法让它发挥作用。任何帮助都将不胜感激。我得到了这个错误：

错误：提供的数据源与数组、可观察数据源或数据源不匹配

这是我从服务器得到的JSON响应：

{receivedDate: "2018-05-22T00:00:00", id: "27280371", companyName: "Dark&Stormy", documentType: 11, receipts: Array(1), …}

这是我的代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { HttpClient, HttpHeaders, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';

import { myService } from './../../../api';
import { InputService } from './../input.service';

import { IReceipt } from './../models/receipt.model';

@Component({
  selector: 'app-submission-details',
  templateUrl: './submission-details.component.html',
  styleUrls: ['./submission-details.component.css']
})
export class SubmissionDetailsComponent implements OnInit {

  setPaymentMethodForm: FormGroup;
  submissionList = [];
  errorMessage: string;
  private documentId;

  receipt: IReceipt;

  dataSource = new MatTableDataSource();
  displayedColumnsReceipt = ['id', 'fromDate', 'pReference', 'pMethod', 'status', 'valid', 'receipt'];

  constructor(
    private client: myService.Client,
    private fb: FormBuilder,
    private inputService: InputService,
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) { 
      this.createForm();
      activatedRoute.data
      .subscribe(
        data => this.documentId = data[this.documentId]
      );
    }

  id: string;
  private document: any;

  ngOnInit() {

    this.activatedRoute.params.subscribe(params => {
      if (params['id']) {
        this.id = params['id'];
        console.log('paramsId: ', this.id);
        this.inputService.getDocumentId(this.id)
        .subscribe(res => {
          this.dataSource = res;
          console.log('sub-details.res: ', res);
        });
      }
    });
  }

  getSubmissionDetails(string): void {
    this.client.apiSubmissionGetSubmissionDocumentGet('documentId')
      .subscribe(
        data => {
          this.submissionList = this.submissionList;
          console.log('data: ', data);
        },
        (error: any) => this.errorMessage = <any> error);
  }

  createForm() {
    this.setMethodForm = this.fb.group({
      documentId: '',
      receiptType: ''
    });
  }

}

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormBuilder，FormGroup，FormControl}；
从'@angular/common/http'导入{HttpClient，HttpHeaders，HttpRequest，HttpEventType，HttpResponse}；
从“@angular/Router”导入{Router，ActivatedRoute，ParamMap}；
从“rxjs/Observable”导入{Observable}；
从“rxjs/operators”导入{map}；
从'@angular/cdk/collections'导入{DataSource}；
从“@angular/material”导入{MatPaginator、MatSort、MatTableDataSource}；
从“/../../../api”导入{myService}；
从“/../input.service”导入{InputService}；
从“/../models/receipt.model”导入{IReceipt}；
@组成部分({
选择器：“应用提交详细信息”，
templateUrl:“./submission details.component.html”，
样式URL:['./提交详细信息.component.css']
})
导出类SubmissionDetails组件实现OnInit{
setPaymentMethodForm:FormGroup；
提交名单=[]；
错误消息：字符串；
私有文档ID；
收据：IReceipt；
dataSource=新MatTableDataSource（）；
displayedColumnsReceipt=['id'、'fromDate'、'pReference'、'pMethod'、'status'、'valid'、'receipt']；
建造师(
私人客户端：myService.client，
私人fb:FormBuilder，
专用输入服务：输入服务，
专用路由器：路由器，
私有激活路由：激活路由
) { 
这个.createForm（）；
activatedRoute.data
.订阅(
data=>this.documentId=data[this.documentId]
);
}
id：字符串；
私人文件：任何；
恩戈尼尼特（）{
this.activatedRoute.params.subscribe（params=>{
if（参数['id']）{
this.id=params['id']；
log（'paramsId:'，this.id）；
this.inputService.getDocumentId（this.id）
.订阅（res=>{
this.dataSource=res；
log（'sub-details.res:'，res）；
});
}
});
}
getSubmissionDetails（字符串）：无效{
this.client.apSubmissionGetSubmissionDocumentGet（'documentId'））
.订阅(
数据=>{
this.submissionList=this.submissionList；
console.log（'数据：'，数据）；
},
（error:any）=>this.errorMessage=error）；
}
createForm（）{
this.setMethodForm=this.fb.group({
文档ID:“”，
接收类型：“”
});
}
}

这里

什么是

res

？是阵列吗？如果是，那么

this.dataSource.data = res;

---

这是一个组件，因此我认为这是一个错误，不是一个数组。很明显，你需要提供数据，而不是组件。提取数据并如上所示分配。我指的是JSON组件：）如：{receivedDate:“2018-05-22T00:00:00”，id:“27280371”，公司名称：“Dark&Stormy”，文档类型：11，收据：数组（1），…}如您所见，不在[…]@probant中。我不在乎它是什么，您只需要数组。每个元素必须用作行数据供应商。我指的是一个JSON组件——不，只是JSONI得到了这个：尝试区分“[object]”时出错。只允许使用数组和iterables

this.dataSource.data = res;