Angular 5 MatTableDataSource 返回错误“‘OrderDataSource’类型上不存在属性‘订阅’”

Question

我正在尝试在 Angular 5 中使用 MatTables 并收到以下错误：

src/app/components/order/order.component.ts(30,59) 中的错误：错误 TS2339：“OrderDataSource”类型上不存在“订阅”属性。

这是我的代码：

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;
}

Answer 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;
            });
        }
    }