垫排序不适用于垫表 [英] mat-sort not working on mat-table

问题描述

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

<块引用>

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

已经有关于这个问题的 SO 帖子(见以下链接)Mat-table排序演示不起作用，但我仍然无法让它工作.

有人发现这个问题吗?官方示例使用组件本身定义的静态"MatTableDataSource，但是我是从后端查询.

非常感谢任何帮助！

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

import { Component, OnInit, ViewEncapsulation, ViewChild, AfterViewInit} from '@angular/core';从'../../../../../models/feedback'导入{反馈}；从'../../services/feedback.service'导入{FeedbackService}；从'@angular/material'导入{MatTableDataSource，MatSort}；@成分({选择器:'app-view-feedback',templateUrl: './view-feedback.component.html',styleUrls: ['./view-feedback.component.css'],封装:ViewEncapsulation.Emulated})导出类 ViewFeedbackComponent 实现 OnInit、AfterViewInit {反馈:反馈[] = [];showSpinner: boolean = true;显示列:字符串[] = ['ID'，'用户'，'时间戳','星星'];数据源:MatTableDataSource <反馈 >;@ViewChild(MatSort) 排序:MatSort；构造函数(私有_feedbackService:反馈服务){}ngOnInit() {this._feedbackService.getFeedback.subscribe(资源=>{this.feedbacks = res;this.dataSource = new MatTableDataSource(this.feedbacks);});}ngAfterViewInit() {this.dataSource.sort = this.sort;}}

<mat-table #tbl [dataSource]="dataSource" matSort><!-- 列定义--><ng-container matColumnDef="id"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>Id</mat-h​​eader-cell><mat-cell *matCellDef="let r">{{r._id}} </mat-cell></ng-容器><ng-container matColumnDef="user"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>用户 ID</mat-h​​eader-cell><mat-cell *matCellDef="let r">{{r.user}} </mat-cell></ng-容器><ng-container matColumnDef="timestamp"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>日期</mat-h​​eader-cell><mat-cell *matCellDef="let r">{{r.timestamp}} </mat-cell></ng-容器><ng-container matColumnDef="stars"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>星星</mat-h​​eader-cell><mat-cell *matCellDef="let r">{{r.stars}} </mat-cell></ng-容器><!-- tbl 显示设置--><mat-h​​eader-row *matHeaderRowDef="displayedColumns"></mat-h​​eader-row><mat-row *matRowDef="let row; columns:displayedColumns;"></mat-row></mat-table>

解决方案

问题是下一段代码

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

发生在您真正在此处订阅表格之前:

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

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

My mat-table is working fine, but when adding mat-sort following the official api documentation, it fails at the ngAfterViewInit with the following message

Cannot set property 'sort' of undefined at ViewFeedbackComponent.ngAfterViewInit

There is already a SO post on this issue (see following link) Mat-table Sorting Demo not Working but I still am not able to get it working.

Does somebody spot the issue? The official example works with a "static" MatTableDataSourcedefined in the component itself, I am querying from my back-end, however.

Any help is greatly appreciated!

MatSortModule is already imported in app.module.ts, mat-sort-header directives are applied to the columns and the ngAfterViewInit is already exactly like in the official example...

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>

解决方案

Problem is that next piece of code

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

is happen before you actually got your table in subscription here:

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

  }

As a possible solution, you could synchronize ngAfterViewInit call and getFeedback subscription via Observable.zip. Please refer to RxJS zip documentation

这篇关于垫排序不适用于垫表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！