没有错误，但`md-table`没有渲染数据（`connect（）`没有被调用）

Question

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

• 我缺少什么？
• dataSource对象是否具有特定的数据格式？

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

  

通过DataSource向表提供数据。当表接收数据源时，它会调用DataSource的connect函数，该函数返回一个发出数据数组的observable。只要数据源向此流发送数据，该表就会更新。

以下是我的代码。

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

在bug中提到了解决方法。

需要强制进行变更检测。

this.changeDetector.detectChanges（）;

在此之后

为我工作。