Angularmaterial排序表头在更改数据源后无法工作
创始人
2024-10-28 10:01:04
0

在更改数据源后,需要手动重新设置排序表头的数据源。这可以通过以下步骤实现:

  1. 在 HTML 模板中,找到包含排序表头的 mat-table 元素,将其绑定到模板引用变量中:

  2. 在组件类中,使用 ViewChild 装饰器和 @Input() 装饰器声明这个引用变量:

    @ViewChild('table') table: MatTable; @Input() dataSource: MatTableDataSource;

  3. 在更改数据源后,重新设置表头的数据源:

    this.dataSource = new MatTableDataSource(data); this.table.dataSource = this.dataSource;

  4. 现在,表头排序应该正常工作了。

完整的代码示例:

HTML 模板:


  
     Name 
     {{item.name}} 
  
  
     Age 
     {{item.age}} 
  
  
  

组件类:

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {
  displayedColumns: string[] = ['name', 'age'];
  dataSource: MatTableDataSource;

  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild('table') table: MatTable;
  @Input() data: any[];

  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.data);
    this.dataSource.sort = this.sort;
    this.table.dataSource = this.dataSource;
  }

  ngOnChanges(changes) {
    if (changes.data) {
      this.dataSource = new MatTableDataSource(changes.data.currentValue);
      this.dataSource.sort = this.sort;
      this.table.dataSource = this.dataSource;
    }

相关内容

热门资讯

微扑克有辅助挂!微扑克真的有辅... 微扑克有辅助挂!微扑克真的有辅助,wpk一贯是真的有挂,解说技巧(有挂ai代打)1、每个玩家都可以进...
wepokeai代打!wepo... wepokeai代打!wepoke软件透明挂,wepoke辅助真的假的,2025新版教程(有挂规律)...
必备辅助推荐!广东老友麻将有没... 必备辅助推荐!广东老友麻将有没有挂(透视)都是是有挂(2025已更新)(哔哩哔哩)1.广东老友麻将有...
微扑克有辅助挂!微扑克辅助钻石... 微扑克有辅助挂!微扑克辅助钻石,微扑克竟然是真的有挂,科技教程(有挂工具)是一款可以让一直输的玩家,...
wepoke有挂!德州wepo... wepoke有挂!德州wepower透视辅助,wepoke显示有,微扑克教程(有挂工具);原来确实真...
玩家爆料!东游麻将中挂件(辅助... 玩家爆料!东游麻将中挂件(辅助)一贯有挂(2024已更新)(哔哩哔哩);1、金币登录送、破产送、升级...
微扑克ai辅助!微扑克ai人工... 一、微扑克简介了解软件请加微:136704302微扑克是一款在线扑克游戏平台,玩家可以在平台上进行多...
透牌教程!wepoke游戏辅助... 透牌教程!wepoke游戏辅助工具(wepoke辅助挂)WepOke(一贯真的有挂);科技详细教程小...
分享实测!胡乐辅助器免费版(辅... 分享实测!胡乐辅助器免费版(辅助挂)竟然有挂(2025已更新)(哔哩哔哩)1、玩家可以在胡乐辅助器免...
微扑克辅助机器人!wpk微扑克... 微扑克辅助机器人!wpk微扑克辅助透视,微扑克ai辅助工具,细节揭秘(有挂技巧);微扑克是一种具有地...