无法将数据传递给 MatTableDataSource答案

【问题标题】：Unable to pass data to MatTableDataSource无法将数据传递给 MatTableDataSource
【发布时间】：2018-10-16 08:35:30
【问题描述】：

我有一个从 http 请求返回对象的服务。

我正在尝试将响应作为数据源输入传递，但它会引发错误 Argument of type 'Object' is not assignable to parameter of type 'ReleasenoteData'

我需要显示标题。请帮忙

响应将如下所示，

{  
   "results":[  
      {  
         "id":"203901655",
         "type":"page",
         "status":"current",
         "title":"Some Title",
         "restrictions":{  

         },
.....

下面是我的代码，

import { Component, OnInit, ViewChild } from '@angular/core';
import { ReleaseService } from './release.service';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';


@Component({
  selector: 'releases',
  templateUrl: './releases.component.html'
})
export class ReleasesComponent implements OnInit {
  title = 'Release notes';
  displayedColumns = ['releasenotes'];
  dataSource: MatTableDataSource<ReleasenoteData>;
  data:any;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor ( private releaseNotes: ReleaseService ) {
  }

  ngOnInit () {
    const data: ReleasenoteData[] = [];

     this.data = this.releaseNotes.getReleaseNotes()
    .subscribe(response => data.push(response));   
  }
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}

export interface ReleasenoteData {
  id: string;
  title: string;
}

服务：

  getReleaseNotes() {
      return this.http.get(this.url);
  }

【问题讨论】：

标签： angular

【解决方案1】：

您的响应类型错误，您的界面模型只有 id 和 title。您需要对其进行类型转换或更改您的界面模型，以便它接受您的响应。

类型转换的解决方案：

response => data.push(new MatTableDataSource<ReleaseNoteData>(response as {id: number, title: string }))

参考此链接：
Typescript error: Argument of type 'Object' is not assignable to parameter of type '{}[]'

【讨论】：

它显示[ts] Cannot find name 'ReleaseNoteData'.
你没有导入你的界面ReleaseNoteData

【解决方案2】：

您已接近正确的语法，只需在此处稍作更改：

this.data = this.releaseNotes.getReleaseNotes().subscribe(response => data.push(response));

订阅方法不返回ReleasenoteData，而是一个订阅。改变它：

this.releaseNotes.getReleaseNotes().subscribe(response => this.data.push(response.results));

我不明白您为什么将服务响应分配给本地 const data 。使用this.data，去掉any并设置类型。

【讨论】：

它显示[ts] Property 'results' does not exist on type 'Object'.
您的服务没有返回您报告的响应 json。添加有关服务的详细信息。
我收到这样的回复{results: Array(25), start: 0, limit: 25, size: 25, _links: {…}}
我建议你在服务方法中添加返回类型getReleaseNotes = ():Observable<ResponseType> => { return this.http.get(this.url); }，ResponseType必须有results: Array<ReleasenoteData>。创建更多类型并删除所有any，以捕获所有转换错误。
这不是您上面报告的结果...您是从头开始学习角度的吗？我建议首先阅读此内容以进行解释，然后继续阅读 observables、subscribe() 和 map 之类的函数...link 您的服务方法也没有返回类型 (Observable)

【解决方案3】：

您是否在“this.releaseNotes.getReleaseNotes()”服务中使用 HTTP 调用？如果是这种情况，您可能需要首先从响应中“提取”内容：

this.releaseNotes.getReleaseNotes()
    .map((res: Response) => {
       return res.json().results || {};
     })
    .subscribe(a => data.push(a))

【讨论】：

它会抛出一个错误[ts] Property 'json' does not exist on type 'Object'.
尝试删除它并查看。 getReleaseNotes() 返回什么？
这是服务，它返回响应 `getReleaseNotes() { return this.http.get(this.url); } `