尝试将http响应分配给数据源时发生角度表错误

Question

基于此示例https://stackblitz.com/angular/lmgdevradbre?file=app%2Ftable-http-example.ts

我正在努力使代码适应我的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);

为什么是这样？财产"包括"什么？我在数据源对象中看不到它。

错误特别出现在这个.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((返回：

{
"_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": {}
}

Answer 1

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

• getConLiq()函数返回Observable<ConLiq>，但它应该是Observable<ConLiq[]>。return this.http.get<ConLiq>(json_con);也是如此，应该是return this.http.get<ConLiq[]>(json_con);
• MatTableDataSource是参数化类型，因此线dataSource = new MatTableDataSource();应该是dataSource = new MatTableDataSource<ConLiq>();