angular - 没有错误，但 `md-table` 未渲染数据(未调用 `connect()`)

Question

我正在尝试实现 Angular Material Table. 。问题是我没有收到任何错误，但没有输出。我没有使用典型的例子，但正在尝试使用我自己的数据来实现。

• 我错过了什么？
• dataSource 对象是否具有特定的数据格式？

如果我错了，请纠正我，但根据我对以下文档的理解，如果将 dataSource 设置为 array，它应该可以工作。

Data is provided to the table through a DataSource. When the table receives a data source, it calls the DataSource's connect function which returns an observable that emits an array of data. Whenever the data source emits data to this stream, the table will update.

下面是我的代码。

HTML:

<div class="example-container mat-elevation-z8">
  <label> Testing </label>
  <md-table #table [dataSource]="dataSource">


    <ng-container cdkColumnDef="dbquery">
      <md-header-cell *cdkHeaderCellDef>dbquery </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.dbquery}} </md-cell>
    </ng-container>

    <md-header-row *cdkHeaderRowDef="columns"></md-header-row>
    <md-row *cdkRowDef="let row; columns: columns;"></md-row>

  </md-table>
</div>

TS:

    import { Component, OnInit , Input,OnChanges } from '@angular/core';
import {DataSource} from '@angular/cdk';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  @Input() tabledata : any;
  private headers : any;
  private columns : any;

  public dataSource: BindDataTableSource | null;

  dataChange: BehaviorSubject<any> = new BehaviorSubject<any>([{}]);
  get data(): [{}] { console.log("getData is called ",this.dataChange.value) ;return this.dataChange.value; }

  constructor(){};
  ngOnInit() {
    this.dataSource = new BindDataTableSource(this);

    this.headers = this.tabledata.headers;
    this.columns = this.tabledata.columns;

    console.log("inside nginit ",this.dataSource);
    console.log(this.headers);
    console.log(this.columns);

  }


}

export class BindDataTableSource extends DataSource<any>{

  constructor(private datatable : DataTableComponent){

    super();
    console.log(this.datatable.tabledata.data);
    for(let index = 0 ; index < this.datatable.tabledata.data.length ; index++){
//      console.log(this.datatable.tabledata.data[index]);
      this.datatable.dataChange.next(this.datatable.tabledata.data[index]);
    }

//     this.datatable.dataSource = this.datatable.data.data;
//    console.log("inside bindatatablsource ",this.datatable.dataSource);

  }
  connect() : Observable<[{}]> {

    console.log("connect is called ->  ",this.datatable.dataChange);
    return this.datatable.dataChange;
  }

  disconnect(){};

}

下面是我的控制台输出

感谢您的帮助。

P.S - 文档很糟糕。

Answer 1

https://github.com/angular/material2/issues/5593

错误中提到了解决方法。

需要强制进行更改检测。

this.changeDetector.detectChanges();

此后为我工作。