为什么不呈现垫表？

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']