Question

我正在尝试使用Angular Material Table进行选择，它说在浏览器控制台上'data'在这里未定义。控制台上的错误为“无法读取带有选择的材料表中未定义的属性'数据'”，但是该表与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}`;
    }

这是HTML表

<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的

实例。获取您的用户数据并在其中设置displayColumns ngOnInit()，在ngAfterContentChecked()中，您需要创建MatTableDataSource 实例，并在table.dataSource检查中将此实例设置为ngAfterViewInit() 下面

    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

通过选择无法读取材料表中未定义的属性“数据”

1 个答案: