アンギュラ - 素材TABLE

Question

私は

インタフェース

export interface IToDoList { 

    ID: number, 
    Comment: string 
} 

service.ts

getToDoList(ID: string): Observable<IToDoList[]> { 
    return this._http.get(environment.BASE_API_URL + 'GetToDoList/' + ID) 
     .map((response: Response) => <IToDoList[]>response.json()) 
     .do(data => console.log('All' + JSON.stringify(data))) 
     .catch(this.handleError); 
} 

component.ts

export class DashboardComponent implements OnInit { 

    bsaFollowup: IBSAFollowup[] = null; 
    toDoList: IToDoList[] = null; 

    dataSource = new DashboardDataSource(this._dashboardService) 
    displayedColumns = ['Comment']; 
    constructor(private _dashboardService: DashboardService{ 

    } 
    ngOnInit(): void { 

     ..some code 
    } 

} 
export class DashboardDataSource extends DataSource<any> { 
    toDoList: IToDoList[]; 
    constructor(private _dashboardService: DashboardService) { 
     super(); 
    } 
    public connect(): Observable<IToDoList[]> { 
     return this._dashboardService.getToDoList('xxxxx'); 


    } 
    disconnect(){} 


} 

材質表に自分のデータを結合問題が生じています

html

  <mat-table [dataSource]="dataSource"> 
       <ng-container matColumnDef="Comment"> 
        <mat-header-cell *matHeaderCellDef> Commment </mat-header-cell> 
        <mat-cell *matCellDef="let row"> {{row.comment}} </mat-cell> 
       </ng-container> 
       <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row> 
       <mat-row *matRowDef="let row; columns:displayedColumns"></mat-row> 
      </mat-table> 

iは、テーブルは、列が表示されていないコードを実行し、私は（F12を使用して）エラーを取得

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

**************** ******************************更新******************* ***************************

私はコンポーネント

getToDoList(psnlUID:string) { 
     return this._http.get(environment.BASE_API_URL + 'GetToDoList/' + psnlUID) 
      .map((response: Response) => response.json()) 
      .do(data => console.log('All' + JSON.stringify(data))) 
      .catch(this.handleError); 
    } 

に私のサービスを変更しました

toDoList: IToDoList[] = null; 
dataSource = new MatTableDataSource(); 
    ngOnInit(): void { 
     this.GetToDoList(this.userID); 
     this.dataSource = this.toDoList; // I get error 
    } 
GetToDoList(PNSLUID: string) { 
     this._dashboardService.getToDoList(PNSLUID) 
      .subscribe(
      data => { 
       this.toDoList = data.result; 

        }, 
      error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger')); 
    } 

私は（this.dataSource = this.toDoListから;）エラーが出ます。このdoesntの仕事ならば

Severity Code Description Project File Line Suppression State Error TS2322 Type 'IToDoList[]' is not assignable to type 'MatTableDataSource<{}>'. Property '_data' is missing in type 'IToDoList[]'.

Answer 1

あなたは、あなたのサービスからのデータとMatTableDataSouceをinitalize以下にコンポーネントのコードを変更する必要があります。

dataSource = new MatTableDataSource(); 

ngOnInit(): void { 
    this.GetToDoList(this.userID); 
} 

GetToDoList(PNSLUID: string) { 
    this._dashboardService.getToDoList(PNSLUID) 
    .subscribe(data => { 
     // Set the dataSource here 
     this.dataSource = new MatTableDataSource(data.result); 
    }, 
    error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger')); 
} 

Answer 2

あなたは<mat-table #table [dataSource]="dataSource">

を#table追加することができます。スタックブリッツで再現できますか？ Reference