垫排序不适用于垫子桌子

Question

我的mat-table工作正常，但是按照官方api文档添加mat-sort时，它在ngAfterViewInit失败，并显示以下消息

无法在ViewFeedbackComponent.ngAfterViewInit上设置未定义的属性“ sort”

关于此问题已经有一个SO帖子（请参阅以下链接）Mat-table Sorting Demo不起作用，但是我仍然无法使它起作用。

有人发现问题了吗？官方示例使用组件本身中定义的“静态” MatTableDataSource，但是我从后端进行查询。

任何帮助是极大的赞赏！

MatSortModule已导入到app.module.ts中，mat-sort-header指令已应用于列，并且ngAfterViewInit已与官方示例中的完全相同...

import {  Component,  OnInit,  ViewEncapsulation,  ViewChild,  AfterViewInit} from '@angular/core';
import {  Feedback} from '../../../../../models/feedback';
import {  FeedbackService} from '../../services/feedback.service';
import {  MatTableDataSource,  MatSort} from '@angular/material';


@Component({
  selector: 'app-view-feedback',
  templateUrl: './view-feedback.component.html',
  styleUrls: ['./view-feedback.component.css'],
  encapsulation: ViewEncapsulation.Emulated
})
export class ViewFeedbackComponent implements OnInit, AfterViewInit {

  feedbacks: Feedback[] = [];
  showSpinner: boolean = true;
  displayedColumns: String[] = [
    'id',
    'user',
    'timestamp',
    'stars'
  ];
  dataSource: MatTableDataSource < Feedback > ;

  @ViewChild(MatSort) sort: MatSort;

  constructor(private _feedbackService: FeedbackService) {}

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

  }

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


}

<div class="mat-tbl-container mat-elevation-z8">
  <mat-table #tbl [dataSource]="dataSource" matSort>

    <!-- column definitions -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>
      <mat-cell *matCellDef="let r"> {{r._id}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="user">
      <mat-header-cell *matHeaderCellDef mat-sort-header>User Id</mat-header-cell>
      <mat-cell *matCellDef="let r"> {{r.user}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="timestamp">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
      <mat-cell *matCellDef="let r"> {{r.timestamp}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="stars">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Stars</mat-header-cell>
      <mat-cell *matCellDef="let r"> {{r.stars}} </mat-cell>
    </ng-container>

    <!-- tbl display settings -->
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

  </mat-table>

Answer 1

问题是下一段代码

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

发生在您实际上在这里预订表之前：

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

  }

作为一种可能的解决方案，您可以通过同步ngAfterViewInit呼叫和getFeedback订阅Observable.zip。请参考RxJS zip文档

Answer 2

对此的简单解决方案不是在 ngAfterViewInit 中声明排序，而是在从“this._feedbackService.getFeedback.subscribe”获得结果后声明。

解决方法如下。

  ngOnInit() {
    this._feedbackService.getFeedback.subscribe(
      res => {
        this.feedbacks = res;
        this.dataSource = new MatTableDataSource(this.feedbacks);

        this.dataSource.sort = this.sort; //this will solve your problem

      }
    );

  }

上面的一个对我来说非常有效。

谢谢，

Answer 3

确保{static: false}在从 API 获取数据时添加

@ViewChild(MatSort, {static: false}) sort: MatSort;

Answer 4

为了让 matSort 工作，类型定义很重要，至少我发现了这一点。所以在代码中使用任何类型：dataSource: MatTableDataSource; 不起作用。这里必须定义一个类型才能使其工作，尝试定义一个接口并将其传递到 MatTableDataSource 的泛型中。此外 matColumnDef 必须匹配定义类型的属性名称。