Question

我一直在尝试按照所有教程和我找到的答案进行操作，而我却无法使其正常工作。任何帮助表示赞赏。我收到了这个错误：

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

这是我从服务器获得的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: ''
    });
  }

}

Answer 1

下面

this.dataSource = res;

什么是res？是阵列吗？如果是那么

this.dataSource.data = res;

如何在Angular 5中实现数据表的数据源

1 个答案: