我正在尝试使用Angular 5中的MatTables并收到以下错误:
src / app / components / order / order.component.ts(30,59)中的错误:错误TS2339:类型'OrderDataSource'上不存在属性'subscribe'。
这是我的代码:
order.component.ts
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { MatTableDataSource } from '@angular/material';
import { Order } from '../../models/order.model';
@Component({
selector: 'app-order',
templateUrl: './order.component.html',
styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
displayedColumns = ['id', 'status', 'is_active'];
dataSourceNewOrders = new MatTableDataSource();
dataSourceOpenOrders = new MatTableDataSource();
dataSourceProblemOrders = new MatTableDataSource();
constructor() { }
ngOnInit() {
this.loadOrders();
}
loadOrders(){
new OrderDataSource('problem').subscribe(
data => {
this.dataSourceProblemOrders.data = data;
});
new OrderDataSource('new').subscribe(
data => {
this.dataSourceNewOrders.data = data;
});
new OrderDataSource('in-progress').subscribe(
data => {
this.dataSourceOpenOrders.data = data;
});
}
}
@Injectable()
export class OrderDataSource{
constructor(private orderType: string){
}
connect(): Observable<Order[]> {
let records: Order[] = [{
id: 1,
status: "new",
is_active: true
},
{
id: 2,
status: "new",
is_active: false
},
{
id: 3,
status: "in-progress",
is_active: true
}];
return Observable.of(records).delay(500);
// return this.orderService.readRecords({
// 'status': this.orderType
// });
}
disconnect() {}
}
order.model.ts
export interface Order {
id: number;
client_id?: number;
dealer_id?: number;
status: string;
is_active: boolean;
date_created?: string;
date_updated?: string;
}
答案 0 :(得分:1)
您需要subscribe
返回observable
而不是类
loadOrders(){
new OrderDataSource('problem').connect().subscribe(
data => {
this.dataSourceProblemOrders.data = data;
});
new OrderDataSource('new').connect().subscribe(
data => {
this.dataSourceNewOrders.data = data;
});
new OrderDataSource('in-progress').connect().subscribe(
data => {
this.dataSourceOpenOrders.data = data;
});
}
}