Angular Material表格数据需触发筛选/分页才显示的问题修复咨询

我来帮你分析下这个问题，你遇到的情况其实是Angular Material表格数据源的一个常见坑——你的MatTableDataSource初始化时绑定了tableData数组，但当你在订阅里用push往数组添加数据时，数据源并没有感知到数组内容的变化。

因为MatTableDataSource只会在数组引用发生改变，或者手动触发内部变更检测（比如筛选、分页操作）时，才会更新视图。而push只是修改了数组的内容，并没有改变数组本身的引用，所以初始加载时表格完全不知道有新数据进来，只有你触发筛选或分页时，数据源的变更检测才会启动，这时候才会显示数据。

下面给你两种直接有效的修复方案：

方案一：直接更新dataSource.data（推荐，最简洁） #

不需要中间的tableData数组，获取到后端数据后，直接把处理好的数据赋值给dataSource.data，这样数据源会立刻感知到数据变化并更新视图：

@Component({ 
  selector: 'app-alluser', 
  templateUrl: './alluser.component.html', 
  styleUrls: ['./alluser.component.scss'] 
}) 
export class AlluserComponent implements OnInit { 
  constructor(private _user: UserService) { } 
  public users; 
  displayedColumns = ['id', 'username', 'first_name', 'last_name', 'email', 'is_staff', 'is_superuser', 'is_active', 'groups']; 
  // 初始化空数据源，不需要提前绑定tableData
  dataSource = new MatTableDataSource(); 
  @ViewChild(MatSort) sort: MatSort; 
  @ViewChild(MatPaginator) paginator: MatPaginator; 

  ngOnInit() { 
    this._user.getUsersInfo().subscribe(data => { 
      // 直接将处理后的数据赋值给数据源的data属性
      this.dataSource.data = data.map(user => ({ 
        id: user.id, 
        username: user.username, 
        first_name: user.first_name, 
        last_name: user.last_name, 
        email: user.email, 
        is_staff: user.is_staff, 
        is_superuser: user.is_superuser, 
        is_active: user.is_active, 
        groups: user.groups[0] 
      })); 
    }); 
  } 

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

  applyFilter(filterValue: string) { 
    filterValue = filterValue.trim(); 
    filterValue = filterValue.toLowerCase(); 
    this.dataSource.filter = filterValue; 
  } 
}

方案二：保留tableData，强制更新数组引用 #

如果你一定要保留tableData变量，可以在数据处理完成后，重新赋值一个新数组（改变引用），再同步更新数据源：

ngOnInit() { 
  this._user.getUsersInfo().subscribe(data => { 
    this.users = data; 
    const tempData = [];
    for (let user of this.users) { 
      tempData.push( 
        { id: user.id, username: user.username, first_name: user.first_name, last_name: user.last_name, email: user.email, is_staff: user.is_staff, is_superuser: user.is_superuser, is_active: user.is_active, groups: user.groups[0] } 
      ); 
    }
    // 改变数组引用，让数据源感知到变化
    this.tableData = tempData;
    // 同步更新数据源的data属性
    this.dataSource.data = this.tableData;
  }); 
}

额外优化建议 #

可以用RxJS的map操作符来简化数据处理逻辑，让代码更符合Angular的响应式风格：

// 先定义一个用户类型接口，让代码更严谨
interface TableUser {
  id: number;
  username: string;
  first_name: string;
  last_name: string;
  email: string;
  is_staff: boolean;
  is_superuser: boolean;
  is_active: boolean;
  groups: any;
}

// 组件内初始化带类型的数据源
dataSource = new MatTableDataSource<TableUser>();

ngOnInit() { 
  this._user.getUsersInfo().pipe(
    map(data => data.map(user => ({ 
      id: user.id, 
      username: user.username, 
      first_name: user.first_name, 
      last_name: user.last_name, 
      email: user.email, 
      is_staff: user.is_staff, 
      is_superuser: user.is_superuser, 
      is_active: user.is_active, 
      groups: user.groups[0] 
    })))
  ).subscribe(processedData => {
    this.dataSource.data = processedData;
  }); 
}

这样修改后，表格在页面初始化时就能自动加载并显示数据，不需要依赖筛选或分页操作触发了。

内容的提问来源于stack exchange，提问作者devmrh