Mat-table, mat-sort не работает должным образом

Question

Я пытался внедрить mat-sort в mat-table, в моем проекте.После запуска моего проекта я вижу значок «сортировать», могу щелкнуть по нему, но в моем результате ничего не сортируется, всегда такой же вид.

компонент-файл:

@Component({
  selector: 'app-test-component',
  templateUrl: './testComponent.component.html',
  styleUrls: ['./testComponent.component.css'],
  providers: [TestService],
})

export class TestComponent implements OnInit, OnDestroy, AfterViewInit {

  displayedColumns = ['Column1'];

  dataSource = new MatTableDataSource<UserModel>();
  private exDisplayNames: Subscription;


  @ViewChild(MatSort) sort: MatSort;

  constructor(private testService: TestService) {   }

  ngOnInit() {
    this.exDisplayNames = this.testService.userNamesChanged.subscribe((userNameData: UserModel[]) => {
      this.dataSource.data = userNameData;
    });
    this.testService.fetchUserName();
  }

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

  ngOnDestroy() {

    if (this.exDisplayNames) {
        this.exDisplayNames.unsubscribe();
    }
  }

 }

служебный файл:

@Injectable()
export class TestService {


    userNamesChanged = new Subject<UserModel[]>();
    private availableUserName: UserModel[] = [];


    private fbSubs: Subscription[] = [];

    constructor(private db: AngularFirestore) { }


    fetchUserName() {
        this.fbSubs.push(this.db.collection('names/')
            .snapshotChanges()
            .map(docArray => {
                return docArray.map(doc => {
                    return {
                        displayUserName: doc.payload.doc.data().nick,
                    };
                });
            })
            .subscribe((userData: UserModel[]) => {
                this.availableUserName = userData;
                this.userNamesChanged.next([...this.availableUserName]);
            }, error => {
                console.log(error);
            }));
    }

}

html файл:

<section fxLayoutAlign="center">
  <mat-card>
    <mat-card-content>
      <mat-table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="Column1">
          <mat-header-cell *matHeaderCellDef mat-sort-header>Nick</mat-header-cell>
          <mat-cell fxLayout="row" fxLayoutAlign="center center" *matCellDef="let element">{{ element.displayUserName}}</mat-cell>
        </ng-container>

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

Также были импортированы все необходимые материальные модули: MatSortModule, MatTabsModule.

Мои шаги: 1. Добавлено в компонент:@ViewChild(MatSort) sort: MatSort.2. Реализует AfterViewInit.3. Добавлено:

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

В html-файл добавлено: matSort в <mat-table>. Добавлен mat-sort-header к <mat-cell-header>.

Как я уже писал: я вижу значок сортировки настолбец, но после нажатия - ничего не меняется, ничего не сортируется.

Answer 1

Я не уверен, как выглядит UserModel, но я не думаю, что он содержит свойство Column1:

matColumnDef="Column1"

Измените эту часть на что-то вродеmatColumnDef="displayUserName" или какое-либо другое свойство, имеющееся в модели.

Также измените displayedColumns = ['displayUserName'];

Из документов:

По умолчанию MatTableDataSource сортируется с помощьюПредположение, что имя отсортированного столбца соответствует имени свойства данных, которое отображает столбец.Например, следующее определение столбца имеет имя position, которое соответствует имени свойства, отображаемого в ячейке строки.

Answer 2

ngOnInit() {
  this.exDisplayNames = this.testService.userNamesChanged.subscribe((userNameData: UserModel[]) => {
    this.dataSource = new MatTableDataSource(userNameData);
    setTimeout(() => this.dataSource.sort = this.sort);
  });
  this.testService.fetchUserName();
}

1. Ваш сортировщик привязан к вашему источнику данных при просмотре init, но он не ждет вашего запроса.
2. Вы должны создать новый экземпляр источника данных и прекратить возиться в свойствах.Материал обеспечивает высокий уровень абстракции, воспользуйтесь этим.

Примечание: в моем решении вы можете увидеть тайм-аут, это для обнаружения изменений.Возможно, вам это не нужно, я просто положил это, чтобы быть уверенным.