Таблица угловых материалов не отображает данные - PullRequest
0 голосов
/ 27 ноября 2018

Я пытаюсь отобразить данные, используя таблицу угловых материалов.Но он не отображает никаких данных и не регистрирует никаких ошибок. Я получаю мои данные, вызывая службу.

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;

}

, и я зарегистрировал источник данных, и это оно.

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...