Question

将数据分配给MatTableDataSource的对象时，收到错误 TypeError：无法读取未定义的属性“dataSource”。无法在方法调用上从http源分配数据接收。

import {MatTableDataSource} from '@angular/material';

版本：角度：5 材料：5

dataSource = new MatTableDataSource();
getData() {
this.http.getListData(function(d){
  this.dataSource.data = d;
  }, function (err) {

  });
}


<mat-table #table [dataSource]="dataSource">



<!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="icon">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.icon}} </mat-cell>
  </ng-container>

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

  <!-- Weight Column -->
  <ng-container matColumnDef="hasLoyaltyScheme">
    <mat-header-cell *matHeaderCellDef> Has Loyalty </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.hasLoyaltyScheme}} </mat-cell>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="open_now">
    <mat-header-cell *matHeaderCellDef> Open Now </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.open_now}} </mat-cell>
  </ng-container>

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

在angular table examples

的ngOnInit（）引用上添加静态数据时的表工作

const ELEMENT_DATA: Element[] = [
  {icon: 1, name: 'Hydrogen', hasLoyaltyScheme: 1.0079, open_now: 'H'},
  {icon: 2, name: 'Helium', hasLoyaltyScheme: 4.0026, open_now: 'He'},
  {icon: 3, name: 'Lithium', hasLoyaltyScheme: 6.941, open_now: 'Li'},
  {icon: 4, name: 'Beryllium', hasLoyaltyScheme: 9.0122, open_now: 'Be'},
  {icon: 5, name: 'Boron', hasLoyaltyScheme: 10.811, open_now: 'B'},
  {icon: 6, name: 'Carbon', hasLoyaltyScheme: 12.0107, open_now: 'C'},
  {icon: 7, name: 'Nitrogen', hasLoyaltyScheme: 14.0067, open_now: 'N'},
  {icon: 8, name: 'Oxygen', hasLoyaltyScheme: 15.9994, open_now: 'O'},
  {icon: 9, name: 'Fluorine', hasLoyaltyScheme: 18.9984, open_now: 'F'},
  {icon: 10, name: 'Neon', hasLoyaltyScheme: 20.1797, open_now: 'Ne'},
  {icon: 11, name: 'Sodium', hasLoyaltyScheme: 22.9897, open_now: 'Na'},
  {icon: 12, name: 'Magnesium', hasLoyaltyScheme: 24.305, open_now: 'Mg'},
  {icon: 13, name: 'Aluminum', hasLoyaltyScheme: 26.9815, open_now: 'Al'},
  {icon: 14, name: 'Silicon', hasLoyaltyScheme: 28.0855, open_now: 'Si'},
  {icon: 15, name: 'Phosphorus', hasLoyaltyScheme: 30.9738, open_now: 'P'},
  {icon: 16, name: 'Sulfur', hasLoyaltyScheme: 32.065, open_now: 'S'},
  {icon: 17, name: 'Chlorine', hasLoyaltyScheme: 35.453, open_now: 'Cl'},
  {icon: 18, name: 'Argon', hasLoyaltyScheme: 39.948, open_now: 'Ar'},
  {icon: 19, name: 'Potassium', hasLoyaltyScheme: 39.0983, open_now: 'K'},
  {icon: 20, name: 'Calcium', hasLoyaltyScheme: 40.078, open_now: 'Ca'},
];


ngOnInit() {
    this.dataSource.data = ELEMENT_DATA;
  }

TypeError：无法读取未定义表格材质角度的属性“dataSource”

0 个答案: