角材料表不显示数据

Question

我正在尝试使用有角度的材料表显示数据。但这不会显示任何数据，也不会记录任何错误。我通过调用服务来获取我的数据。

HTML：-

 <div>
   <mat-table  #table [dataSource]="dataSource">
    <ng-container matColumnDef="isbn">
  <mat-header-cell *matHeaderCellDef> ISBN </mat-header-cell>
  <mat-cell *matCellDef="let item"> {{item.isbn}} </mat-cell>
</ng-container>
<ng-container matColumnDef="title">
  <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
  <mat-cell *matCellDef="let item"> {{item.title}} </mat-cell>
</ng-container>
<ng-container matColumnDef="sector">
  <mat-header-cell *matHeaderCellDef> Sector </mat-header-cell>
  <mat-cell *matCellDef="let item"> {{item.sector}} </mat-cell>
</ng-container>
<ng-container matColumnDef="pubDate">
  <mat-header-cell *matHeaderCellDef> Publication Date </mat-header-cell>
  <mat-cell *matCellDef="let item"> {{item.pubDate}} </mat-cell>
</ng-container>
<ng-container matColumnDef="itemType">
  <mat-header-cell *matHeaderCellDef> Item Type </mat-header-cell>
  <mat-cell *matCellDef="let item"> {{item.itemType}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let item; columns: displayedColumns;"></mat-row>
 </mat-table>
</div>

TypeScript：

export class DisplayAllitemsComponent implements OnInit {

       message:string;
      items:string[]=[];

      displayedColumns = ['isbn','title','sector','pubDate','itemType'];

      dataSource: MatTableDataSource<Item>;


      constructor(private appService: AppService) {
          this.appService.getAllItems()
           .subscribe((data: any) => {
            this.dataSource = new MatTableDataSource(data);
            console.log(this.dataSource)
           });
     }

  }

接口：-

export interface Item {
  isbn: string;
  title: string;
  sector: string;
  pubdate: string;
  itemtype: string;

}

并且我记录了dataSource就是这样。