为什么mat表没有渲染？

Question

现在我用两天时间让Mat表工作。我想在表格中加载公司列表。

我唯一能看到的是：

没有任何错误或任何内容，只是空白。我预计至少会看到一个包含一列“名称”的表格。

这是我的组件和数据源：

    import { OnInit, Component, ChangeDetectorRef } from "@angular/core";
import { CompanyService } from "../../../../services/company.service";
import { CompanyListItem } from "../../../../models/CompanyListItem";

import { Observable } from "rxjs/Observable";
import 'rxjs/add/observable/of';
import { DataSource } from "@angular/cdk/collections";

@Component({
  selector: "company-list",
  templateUrl: "./companylist.component.html"
})
export class CompanyListComponent implements OnInit {

  companys: CompanyListDataSource = new CompanyListDataSource(this.companyService);;
  pagenumber: number = 0
  numberOfRowsPerPage: number = 25
  displayedColumns: ['Name', 'Email']

  constructor(private companyService: CompanyService) {

  }

  ngOnInit(): void {
    this.companyService.GetPaged(this.pagenumber, this.numberOfRowsPerPage).subscribe((succ) => {
      console.log(succ)
    }, (error) => {
      console.log(error)
    })
  }

}

export class CompanyListDataSource extends DataSource<any> {

  constructor(private companyService: CompanyService) {
    super();
  }

  connect(): Observable<CompanyListItem[]> {
    return this.companyService.GetPaged(0,25);
  }
  disconnect() { }
}

这里是表的html：

   <div class="">
  <mat-table #table [dataSource]="companys">

    <ng-container matColumnDef="Name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let company"> {{company.Name}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
  </div>

Answer 1

您没有初始化列。

改变这个：

displayedColumns: ['Name', 'Email']

到此：

displayedColumns = ['Name', 'Email']