Мат-сортировка не работает в угловых мат-таблицах

Question

Моя таблица матов работает нормально, но при добавлении сортировки матов по официальной документации API происходит сбой в ngAfterViewInit со следующим сообщением

Невозможно установить свойство 'sort' из неопределенного aqLeadsComponent.push ../ src / app / приводит / lead.component.ts.LeadsComponent.ngAfterViewInit

Уже есть SO сообщение на Mat-table Sorting Demo и я попробовал их, но я все еще нев состоянии заставить его работать.

Может кто-нибудь помочь мне решить эту проблему?Официальный пример работает со «статическим» MatTableDataSource, определенным в самом компоненте, однако я запрашиваю его из моего бэкенда.

MatSortModule уже импортирован в app.module.ts, директивы mat-sort-headerприменяется к столбцам и ngAfterViewInit уже точно так же, как в официальном примере ...

 export class LeadsComponent implements OnInit,AfterViewInit  {

  displayedColumns: string[] = ['name', 'leadStatus', 'mobile', 'email', 'actions'];
  dataSource: MatTableDataSource<LeadsChildObject>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(public dialog: MatDialog, private dashBoardService: LeadsService,
    private toast: ToastrService) {
  }

    ngAfterViewInit() {
        this.dataSource.sort = this.sort;
      }

      ngOnInit() {
        this.dashboardService.getFeedback.subscribe(
          res => {
            this.leadlist= res;
            this.dataSource = new MatTableDataSource(this.leadlist);
          }
        );
      }
    }
}

Answer 1

Не могли бы вы попробовать вот так:

  ngOnInit() {
    this.dashboardService.getFeedback.subscribe(
      res => {
        this.leadlist= res;
        this.dataSource = new MatTableDataSource(this.leadlist);
        this.dataSource.sort = this.sort;  //new line, also remove same from viewinit
      }
    );
  }

Answer 2

Невозможно установить свойство 'sort' для неопределенного aq LeadsComponent.push ../ src / app / приводит / lead.component.ts.LeadsComponent.ngAfterViewInit

Эта ошибка относится к "sort »вызывается для неопределенного свойства, которое после вашего обновления является свойством источника данных, потому что вы его не инициализируете.

Он не инициализирован, потому что ваш subscribe() (где вы его инициализируете) равен асинхронный , поэтому инициализация происходит после ngAfterViewInit().

Пожалуйста, инициализируйте его в ngOnInit() с помощью:

ngOnInit() {
  // This line of code below:
  this.dataSource = new MatTableDataSource<LeadsChildObject>();

  this.dashboardService.getFeedback.subscribe(
    res => {
      this.leadlist= res;
      this.dataSource = new MatTableDataSource(this.leadlist);
      this.dataSource.sort = this.sort;
    }
  );
}

Проблема в вашем подходе состоит в том, что вы ошибаетесь в использовании MatTableDataSource с подходом простого массива (подход Simple Table)).Пожалуйста, найдите эту документацию для реализации MatTableDataSource подхода