无法通过选择读取 Material Table 中未定义的属性 'data'

Question

我正在尝试使用 Angular Material Table 进行选择，它在浏览器控制台上显示 'data' is undefined here 。控制台上的错误显示 "Cannot read property 'data' of undefined in Material Table with selection" 但是 table 与来自 Json 文件的数据一起显示。

这是 .ts 文件的完整代码

  export class GetUserComponent implements OnInit

  isFetching = false;
  displayedColumns: string[] = ['select','title','content']; 

  dataSource : MatTableDataSource<User>;
  selection = new SelectionModel<User>(true, []);

  constructor(private http: HttpClient, private userService : UserService) { }

    /** Whether the number of selected elements matches the total number of rows. */
    isAllSelected() {
      const numSelected = this.selection.selected.length;
      **const numRows = this.dataSource.data.length;**
      return numSelected === numRows; 
    } 

    /** Selects all rows if they are not all selected; otherwise clear selection. */
    masterToggle() {
      this.isAllSelected() ?
          this.selection.clear() :
          this.dataSource.data.forEach(row => this.selection.select(row));
    }

    /** The label for the checkbox on the passed row */
    checkboxLabel(row?: User): string {
      if (!row) {
        return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
      }
      return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.id + 1}`;
    }

这是HTMLtable

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

    <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()"
                        [aria-label]="checkboxLabel()">
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)"
                        [aria-label]="checkboxLabel(row)">
          </mat-checkbox>
        </td>
      </ng-container>
  <!-- Position Column -->
  <ng-container matColumnDef="title">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th> 
    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
  </ng-container>
  <ng-container matColumnDef="content">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Content </th>
    <td mat-cell *matCellDef="let element"> {{element.content}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
    (click)="selection.toggle(row)">

  </tr>
</table>

请指教

Answer 1

This thing worked for me. import table from angular/material and create an

它使用 viewchild 的实例。获取您的用户数据并设置 displayedColumns ngOnInit(),在ngAfterContentChecked()中你需要创建MatTableDataSource 实例并在 ngAfterViewInit() 检查中将此实例设置为 table.dataSource 以下

    import { MatTable, MatTableDataSource } from '@angular/material/table';

    export class GetUserComponent implements OnInit {

    @ViewChild(MatTable, {static:false}) table: MatTable<any>;
    dataSource :any;


    costructor(private appService:AppService){}

     ngOnInit() {
          this.appService.getUsers().subscribe(data => {
           this.userData= data;
          });
         this.displayedColumns = ['select','title','content'];
     }
      ngAfterViewInit() {

       this.table.dataSource = this.dataSource;
     }
     ngAfterContentChecked(){
    this.dataSource = new MatTableDataSource (this.userData);
  }
}

you can check my stackblitz here

https://stackblitz.com/edit/angular-dynamicexamples

无法通过选择读取 Material Table 中未定义的属性 'data'

Cannot read property 'data' of undefined in Material Table with selection

datasource

angular-material

angular

无法通过选择读取 Material Table 中未定义的 属性 'data'

Cannot read property 'data' of undefined in Material Table with selection

datasource

angular-material

angular

无法通过选择读取 Material Table 中未定义的属性 'data'