MatSort 구현 - 할당 할 수없는 인수

Question

각도 재료 매트 정렬 기능에 대한 코드를 작성하기가 혼란 스럽습니다. 내 변수 dataSource를 선언하면 다음과 같은 오류가 발생합니다.

'관찰 가능'유형의 인수를 'any []'유형의 매개 변수에 지정할 수 없습니다. 속성 길이가 '관찰 가능'유형에 없습니다.

내가 시도 할 수있는 아이디어가 있습니까? 당신이

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

을 내 component.ts의 코드와 관련 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(); 
    } 
} 

감사합니다!

편집 : 내가

Answer 1

문제는 응답이 getRepGen_Report()의 호출하기 전에로드되지 않았 음이다 component.ts을 업데이트했습니다.

당신은 콜백에서 응답을 얻을에 가입해야합니다 -> http.get는 비동기 방식이고 당신은 약속이나 중괄호의 안쪽이 (설정 데이터 소스와 같은 작은 해킹 사용해야합니다 :이 후

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

을 당신은 데이터 소스를 확장 클래스 TableDataSource을 선언하고 생성자 슈퍼에서 구현하는 방법 connect() and disconnect()

편집 구현해야합니다 :

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(){} 
} 

을