Javascript 尝试将http响应分配给数据源时出现角度表错误

Javascript 尝试将http响应分配给数据源时出现角度表错误,javascript,angular,typescript,angular-material,Javascript,Angular,Typescript,Angular Material,基于这个例子 我正试图使代码适应api的响应。但是我越来越 Type 'any[] | ConLiq' is not assignable to type '{}[]'. Type 'ConLiq' is not assignable to type '{}[]'. Property 'includes' is missing in type 'ConLiq'. line: ).subscribe(data => this.dataSource.data = data);

基于这个例子

我正试图使代码适应api的响应。但是我越来越

Type 'any[] | ConLiq' is not assignable to type '{}[]'.
  Type 'ConLiq' is not assignable to type '{}[]'.
    Property 'includes' is missing in type 'ConLiq'.

line: ).subscribe(data => this.dataSource.data = data);
为什么会这样?财产的“包括”是什么?我在数据源对象中看不到它

错误具体发生在this.dataSource.data

JSON

[
    {
      "con": "Sonsectetur sunt",
      "con_id": 360,
    },
    {
      "con": "Oulla dolore",
      "con_id": 933,
    }
]
TS

export class LiqConComponent implements OnInit {
    displayedColumns = ['con', 'con_id'];
    exampleDatabase: ExampleHttpDao | null;
    dataSource = new MatTableDataSource();
    isLoadingResults = true;

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

    constructor(private http: HttpClient) { }

    ngOnInit() {
        this.exampleDatabase = new ExampleHttpDao(this.http);

        // If the user changes the sort order, reset back to the first page.
        this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);

        merge(this.sort.sortChange, this.paginator.page)
            .pipe(
                startWith([]),
                switchMap(() => {
                    this.isLoadingResults = true;
                    return this.exampleDatabase!.getConLiq();
                }),
                map(data => {
                    // Flip flag to show that loading has finished.
                    this.isLoadingResults = false;

                    return data;
                }),
                catchError(() => {
                    this.isLoadingResults = false;
                    return observableOf([]);
                })
            ).subscribe(data => this.dataSource.data = data); // Here I get the error
    }
}

export interface ConLiq {
    con: string;
    con_id: number;
}

export class ExampleHttpDao {
    constructor(private http: HttpClient) { }

    getConLiq(): Observable<ConLiq> {
        const json_con = api + 'conliq';

        return this.http.get<ConLiq>(json_con);
    }
}

您的代码中存在多个问题:

  • getConLiq()
    函数返回
    Observable
    ,但它应该是
    Observable
    返回this.http.get(json\u-con)也是如此
    ,应该是
    返回这个.http.get(json\u-con)
  • MatTableDataSource
    是一种参数化类型,因此行
    dataSource=new MatTableDataSource()应该是
    dataSource=new MatTableDataSource()

看起来好像
数据的类型是
any[]| ConLiq
,它不能从一个对象数组映射到
ConLiq
。数组上会有一个
includes
函数,但
ConLiq
没有。我想您可能想要
any[]| ConLiq[]
,但我对
MatTableDataSource
一无所知。
getConLiq()
返回什么?可能是
ConLiq
?它返回一个对象,即添加到OP中的JSON.stringify中的内容
{
  "_isScalar": false,
  "source": {
    "_isScalar": false,
    "source": {
      "_isScalar": false,
      "source": {
        "_isScalar": true,
        "value": {
          "url": "api address",
          "body": null,
          "reportProgress": false,
          "withCredentials": false,
          "responseType": "json",
          "method": "GET",
          "headers": {
            "normalizedNames": {},
            "lazyUpdate": null,
            "headers": {}
          },
          "params": {
            "updates": null,
            "cloneFrom": null,
            "encoder": {},
            "map": null
          },
          "urlWithParams": "api address"
        }
      },
      "operator": {
        "concurrent": 1
      }
    },
    "operator": {}
  },
  "operator": {}
}