Невозможно прочитать свойство 'данные' из неопределенного в таблице материалов с выбором - PullRequest
Новая
       2

Невозможно прочитать свойство 'данные' из неопределенного в таблице материалов с выбором

0 голосов
/ 14 января 2020

Я пытаюсь использовать Angular Таблица материалов с выбором, он говорит, что в консоли браузера «данные» здесь не определены. В консоли появляется сообщение об ошибке «Не удается прочитать свойство 'данные' неопределенного в таблице материалов с выбором", однако таблица отображается с данными из файла Json.

Вот полный код для .ts file 

  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>

Пожалуйста, сообщите об этом.

1 Ответ

0 голосов
/ 14 января 2020 
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

...