angular5材质无法在表格中显示任何数据

Question

这是我的角度项目配置，

"@angular/cdk": "^5.2.0",
"@angular/common": "~5.2.6",
"@angular/compiler": "~5.2.6",
"@angular/core": "~5.2.6",
"@angular/forms": "~5.2.6",
"@angular/http": "~5.2.6",
"@angular/material": "^5.2.0"

我正在使用有角度的材料来构建数据表，我遵循的是https://material.angular.io/components/table/examples示例，其代码与示例代码几乎相同，但是该表没有显示任何内容。

代码如下：

ts代码

export class ordersComponent {

  displayedColumns =['position', 'name', 'weight', 'symbol'];

  //dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  dataSource = ELEMENT_DATA;

}

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA : PeriodicElement[]= [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Li: PeriodicElement[]thium', weight: 6.941, symbol: 'Li'},
   {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}
 ];

html代码是

 <div class="mat-elevation-z8">
   <mat-table mat-table [dataSource]="dataSource">

     <ng-container matColumnDef="position">
       <th mat-header-cell *matHeaderCellDef> No. </th>
       <td mat-cell *matCellDef="let element">  </td>
     </ng-container>
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef> Name </th>
       <td mat-cell *matCellDef="let element">  </td>
     </ng-container>
     <ng-container matColumnDef="weight">
       <th mat-header-cell *matHeaderCellDef> Weight </th>
       <td mat-cell *matCellDef="let element">  </td>
     </ng-container>
     <ng-container matColumnDef="symbol">
       <th mat-header-cell *matHeaderCellDef> Symbol </th>
       <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
     </ng-container>

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

 </div>

我查看了html，发现html产生了4个确切的表格html元素，但是为什么它只是在每个html元素上不显示任何数据？

Answer 1

  不要采用复杂的解决方案。代替创建“ MatTableDataSource”的实例，并在MatTableDataSource中将“数据”作为属性，因此，您可以直接将数组分配给该属性。

 我在这里stackblitz添加了一个演示