Как я могу решить эту ошибку и почему она возникла?

Внедрение таблицы AngularMaterial с сортировкой заголовков. Я получаю эту ошибку в консоли:

ОШИБКА TypeError: Невозможно установить свойство 'sort' неопределенного в

и эта ошибка в терминале:

ошибка TS2740: в типе «MatTableDataSource» отсутствуют следующие свойства типа «Сотрудник []»: длина, всплывающее окно, push, concat и еще 24.

ошибка TS2322: тип «MatSort» не может быть назначен типу «(compareFn?: (a: Сотрудник, b: Сотрудник) => число) => Сотрудник []».

Тип «MatSort» не дает совпадения для подписи «(compareFn?: (a: Сотрудник, b: Сотрудник) => номер): Сотрудник []».

Я не могу получить от меня то, что он хочет. Буду признателен за любые подсказки!

Я использовал код из документации AngularMaterial, за исключением интерфейса для данных. Может ли это быть проблемой?

Компонент списка сотрудников


import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
import { AngularFirestore } from '@angular/fire/firestore';
import { EmployeeService } from '../shared/employee.service';
import { Employee } from '../shared/employee';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.scss']
})
export class EmployeeListComponent implements OnInit {

  displayedColumns: string[] = ['fullname', 'position', 'mobile'];
  dataSource;

  @ViewChild(MatSort) sort: MatSort;

  constructor(private service: EmployeeService) { }

  ngOnInit() {
    this.service.getEmployees().subscribe(employees => {
      this.dataSource = new MatTableDataSource(employees);
      console.log(this.dataSource);
    });
    this.dataSource.sort = this.sort;

  }

}


Список сотрудников HTML


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

  <!-- Position Column -->
  <ng-container matColumnDef="fullname">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Full Name </th>
    <td mat-cell *matCellDef="let element"> {{element.fullname}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Position </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="mobile">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Mobile </th>
    <td mat-cell *matCellDef="let element"> {{element.mobile}} </td>
  </ng-container>

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


СотрудникСервис


getEmployees() {
    return this.firestore.collection<Employee>('employees')
      .snapshotChanges()
      .pipe(
        map(actions => actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data } as Employee;
       })
        )
      );
}

Класс сотрудника


export class Employee {
  id: string;
  fullname: string;
  empCode: string;
  position: string;
  mobile: string;
}



person Valeryi Oleinyk    schedule 18.05.2019    source источник
comment
Вы можете попробовать установить тайм-аут для операции сортировки до получения данных, добавив setTimeout(() => this.dataSource.sort= this.sort); в ngOnInit после строки console.log.   -  person Karthik_Siddh    schedule 18.05.2019
comment
setTimeout() сработало?   -  person Karthik_Siddh    schedule 18.05.2019
comment
@Karthik_Siddh Я решил проблему с ngAfterViewInit и переместил некоторый код в раздел подписки. У меня это хорошо сработало, что решило проблему с ошибками, но моя сортировка по некоторым причинам все еще не работает. Может быть, вы знаете, почему? Буду признателен за любые намеки на это   -  person Valeryi Oleinyk    schedule 18.05.2019


Ответы (2)


Вы пытаетесь получить доступ к данным из-за пределов подписки, они должны быть внутри.

После этого вы столкнетесь с проблемой, когда this.sort не определено в хуке ngOnInit, это происходит из-за того, что вы пытаетесь получить доступ к элементу HTML, который еще не был отрисован. (матовая сортировка)

Существует хук жизненного цикла, который вы можете использовать, чтобы гарантировать, что представление готово для доступа к @ViewChild, это ngAfterViewInit, только запускается только при отрисовке HTML.

Попробуйте так структурировать.


import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
import { AngularFirestore } from '@angular/fire/firestore';
import { EmployeeService } from '../shared/employee.service';
import { Employee } from '../shared/employee';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.scss']
})
export class EmployeeListComponent implements AfterViewInit{

  displayedColumns: string[] = ['fullname', 'position', 'mobile'];
  dataSource;

  @ViewChild(MatSort) sort: MatSort;

  constructor(private service: EmployeeService) { }

  ngAfterViewInit(): void
  {
    this.service.getEmployees().subscribe(employees => {
      this.dataSource = new MatTableDataSource(employees);
      if (this.sort) // check it is defined.
      {
          this.dataSource.sort = this.sort;
      }
    });
  }

}

Документация Жизненный цикл AfterViewInit // Подробнее.

person Dince12    schedule 18.05.2019
comment
Спасибо! С ошибкой помогло, но у меня сортировка все равно не работает :/ Я уже все сравнил с исходным кодом из документации - все то же самое. В чем может быть проблема? - person Valeryi Oleinyk; 18.05.2019
comment
я не на 100% с материальными битами, просто предлагаю свою помощь с ошибками, связанными с более угловатыми. Соответствуют ли ваши данные тому, что ожидает сортировка мата? - person Dince12; 18.05.2019
comment
Думаю, да ???? он создает мою таблицу с данными, которые у меня есть. AngularMaterial требует массив с данными. Я понял. Может ли причина быть в использовании класса Employee, кроме интерфейса Employee? Это единственная разница, которую я вижу. Я использовал все теги matSort для mat-table и may-sort-header для mat-header-cell. - person Valeryi Oleinyk; 18.05.2019
comment
пожалуйста, отредактируйте свои данные на вопрос, и форма класса, который вы определили, посмотрит - person Dince12; 18.05.2019
comment
Виноват! :D Я должен был импортировать MatSortModule в свой модуль. Я изучил документацию. Спасибо еще раз! - person Valeryi Oleinyk; 18.05.2019

В целом ваш код выглядит нормально, но эта строка

this.dataSource.sort = this.sort;

находится не в том месте, его следует поместить внутрь блока subscribe.

Причина для ERROR TypeError: Cannot set property 'sort' of undefined

Вы смешиваете свой синхронный код с асинхронным, и под этим я подразумеваю, что ваш код subscribe будет выполняться только тогда, когда будет возвращен ответ от API (от 1 до 2 секунд), но this.dataSource.sort = this.sort; не будет ждать ответа, потому что это синхронный код, и он продолжит свою работу. выполнение независимо от любого запроса HTTP, и ваш объект dataSource будет undefined, поэтому вам нужно переместить его в асинхронную часть.

Ваш код будет таким:

ngOnInit() {
    this.service.getEmployees().subscribe(employees => {
      this.dataSource = new MatTableDataSource(employees);
      console.log(this.dataSource);
      this.dataSource.sort = this.sort; <- note this line 

   });   
}
person asimhashmi    schedule 18.05.2019
comment
Да, глупая ошибка ???? Большое спасибо! Вы используете AngularMaterial? - person Valeryi Oleinyk; 18.05.2019
comment
Ваши решения помогли решить проблему с ошибками, но моя сортировка все равно не работает :/ в чем может быть проблема? Я знаю, что в моем случае, наверное, все что угодно ???? но все же есть намеки на это? - person Valeryi Oleinyk; 18.05.2019