angular - mat-sort 在 mat-table 上不起作用

Question

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

无法在 ViewFeedbackComponent.ngAfterViewInit 处设置未定义的属性“排序”

已经有一个关于这个问题的帖子（见下面的链接）Mat-table Sorting Demo not working，但我仍然无法让它工作。

有人发现问题了吗？官方示例使用组件本身中定义的“静态”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>

score 23 · Accepted Answer

问题是下一段代码

  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 文档

score 8 · Accepted Answer

对此的简单解决方案不是在 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

      }
    );

  }

以上对我来说非常有效。

谢谢，

score 6 · Accepted Answer

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

score 5 · Accepted Answer

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

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

score 0 · Accepted Answer

我正在使用旧版本的角材料中的前一种排序方法示例。最新的角度材料排序示例用于ngAfterViewInit()调用排序this.dataSource.sort = this.sort;我无法使用新示例进行排序。较旧的排序方法使用扩展 DataSource 。我能够使用新路径 `import { DataSource } from '@angular/cdk/table' 导入 DataSource；

import { Component, ViewChild, Inject, OnInit, ElementRef } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/table';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpResponse, HttpHeaders, HttpRequest} from '@angular/common/http';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

export interface Data {}

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

export class AppComponent implements OnInit {

  myData: Array < any > ;
  displayedColumns = ['id', 'name'];

  dataSource: MyDataSource;

  @ViewChild(MatSort) sort: MatSort;

  constructor(private http: HttpClient) {}

 getData() {
    let url = 'https://api.mydatafeeds.com/v1.1/cumulative_player_data.json?';
    let headers = new HttpHeaders({ "Authorization": "123ykiki456789123456" });
    this.http.get(url, {headers})
      .subscribe(res => {
        this.myData = res;
        this.dataSource = new MyDataSource(this.myData, this.sort);
      });
  }

  ngOnInit() {
    this.getData();
  }
}

export class MyDataSource extends DataSource < any > {
  constructor(private dataBase: Data[], private sort: MatSort) {
    super();
  }
  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable < Data[] > {
    const displayDataChanges = [
      Observable.of(this.dataBase),
      this.sort.sortChange,
    ];

    return Observable.merge(...displayDataChanges).map(() => {
      return this.getSortedData();
    });
  }

  disconnect() {}

  /** Returns a sorted copy of the database data. */
  getSortedData(): Data[] {
    const data = this.dataBase.slice();
    if (!this.sort.active || this.sort.direction == '') { return data; }

    return data.sort((a, b) => {

      let propertyA: number | string = '';
      let propertyB: number | string = '';

      switch (this.sort.active) {
        case 'id':
          [propertyA, propertyB] = [a.id, b.id];
          break;
        case 'name':
          [propertyA, propertyB] = [a.name, b.name];
          break;

      }

      let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
      let valueB = isNaN(+propertyB) ? propertyB : +propertyB;

      return (valueA < valueB ? -1 : 1) * (this.sort.direction == 'asc' ? 1 : -1);
    });

  }

}

<mat-table #table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
    <mat-cell *matCellDef="let data"> <b>{{data.id}}.</b>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
    <mat-cell *matCellDef="let data"> <b>{{data.name}}.</b>
    </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let data; columns: displayedColumns;"></mat-row>
</mat-table>

score 0 · Accepted Answer

0

我重新定义了继承自 MatTableDataSource 坏主意的连接方法......

于 2019-03-10T23:07:51.603 回答

score 0 · Accepted Answer

您不需要重新初始化对象，您只需更改数据即可

  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
        // becomes
        this.dataSource.data = this.feedbacks

      }
    );

  }

score 0 · Accepted Answer

在 Angular 7 中，对两个分页器使用以下示例，但将分页器替换为排序。

https://stackblitz.com/edit/data-table-multiple-data-source

这是此问题的副本：

在同一个组件中使用 MatSort 的多个 mat-table

angular - mat-sort 在 mat-table 上不起作用

8 回答 8

Related

Reference