MatSortの実装 - 引数が割り当てられない

Question

角度材料マット - ソート機能のコードを書くのは混乱します。私の変数dataSourceを宣言している次のエラーを取得する：

引数 'Observable'は 'any []'型のパラメータに代入できません。プロパティーの長さが 'Observable'タイプにありません。

私は何を試すことができますか？以下は、私のcomponent.tsのコードおよび関連service.ts

component.ts

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core'; 
import { Location } from '@angular/common'; 
import { DataSource } from '@angular/cdk/collections'; 
import { Observable } from 'rxjs/Observable'; 

import { MatTableDataSource, MatSort } from '@angular/material'; 

import { Report } from './../../models/report'; 
import { RepGenService } from './../../services/rep-gen.service'; 

@Component({ 
    selector: 'app-rep-gen-report', 
    templateUrl: './rep-gen-report.component.html', 
    styleUrls: ['./rep-gen-report.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class RepGenReportComponent implements OnInit { 
    reports: Report[]; 

    dataSource = new MyDataSource(this.repGenService); 
    //dataSource = new MatTableDataSource(this.repGenService.getReport()); // <--- error, not working 
    displayedColumns = ['report_id', 'caption']; 

    constructor(private repGenService: RepGenService, private location: Location) { } 

    ngOnInit() { 
     this.getRepGen_Report(); 
    } 

    getRepGen_Report(): void { 
     this.repGenService.getReport() 
      .subscribe(reports => this.reports = reports); 
    } 

    save(reports: Report[]) { 
     this.repGenService.setReport(this.reports); 
    } 

    goBack(): void { 
     this.location.back(); 
    } 

    //@ViewChild(MatSort) sort: MatSort; 
    //ngAfterViewInit() { 
    // this.dataSource.sort = this.sort; // therefor I need the imported MatTableDataSource 
    //} 
} 

export class MyDataSource extends DataSource<any> { 
    constructor(private repGenService: RepGenService) { 
     super(); 
    } 
    connect(): Observable<Report[]> { 
     return this.repGenService.getReport(); 
    } 
    disconnect() { } 
} 

service.ts

import { Injectable } from '@angular/core'; 
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; 

import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 

const httpOptions = { 
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }) 
}; 

@Injectable() 
export class RepGenService { 

    constructor(public http: HttpClient) { } 

    getReport(): Observable<any> { 
     return this.http.get('/api/repGen_Report') 
      .map(response => response); 
    } 

    setReport(reports) { 
     this.http.post('/api/repGen_Report/update', reports 
     ).subscribe(); 
    } 
} 

感謝を見つけることができます！

EDIT：私は

Answer 1

問題は、あなたの応答がgetRepGen_Report()の呼び出しの前にロードされていないということですcomponent.tsを更新しました。

あなたはコールバックでの応答を取得するためにサブスクライブする必要があります - > http.get非同期方式であり、あなたが約束またはこのような小さなハック（中括弧の内側にセットデータソースを使用する必要があります。この後

view: any[] = []; 
    this.repGenService.get().subscribe(res => { 
this.view = res; 
this.dataSource = new TableDataSource(this.view); 
}) 

をあなたは、DataSourceを拡張するクラスのTableDataSourceを宣言し、コンストラクタのスーパーに実装した方法connect() and disconnect()

EDIT実装する必要があります。

dataSource: MatTableDataSource; 

ngOnInit() { 
    this.repGenService.get().subscribe(res => { 
     this.view = res; 
     this.dataSource = new MatTableDataSource(this.view); 
    }); 
    } 

    export class MatTableDataSource extends DataSource<any>{ 
constructor(private view:any[]){ 
    super(); 
    } 
    connect(): Observable<any[]>{ 
     return this.view; 
    } 
    disconnect(){} 
} 

を