使用Ngrx Store/Effects时Mat-Table数据源无法识别数据求助

嘿，我完全懂你现在的困扰——明明已经通过NgRx Effects成功从后端拿到数据了，可Material DataTable就是不认这些数据，作为刚接触这个领域的新手，这种卡壳确实挺让人头疼的。我来给你梳理几个最可能的原因和解决办法，你可以逐一排查：

1. 确认数据是否正确流入组件并完成订阅 #

首先得确保组件已经从Store里正确选中数据，并且完成了订阅：

• 在组件中使用NgRx的select方法获取Store中的数据：

  import { select } from '@ngrx/store';
  import { AppState } from '../store/app.state';
  import { selectUsers } from '../store/user.selectors';
  
  // 定义一个Observable来接收Store中的用户数据
  users$ = this.store.pipe(select(selectUsers));
  

• 在模板中必须用async管道处理这个Observable，因为MatTable需要同步数据或者能被异步解析的数据源：

  <table mat-table [dataSource]="users$ | async">
    <!-- 你的列定义写在这里 -->
  </table>
  

• 可以先在组件里用console.log或者Angular DevTools查看users$是否真的有数据流入，排除订阅环节的问题。

2. 检查DataSource的类型适配 #

如果你的数据结构不是纯数组（比如后端返回的是带分页信息的对象，类似{ data: User[], total: number }），那得把数组部分提取出来：

• 模板中直接提取数组字段：

  <table mat-table [dataSource]="(users$ | async)?.data">
  

• 如果需要分页、排序等高级功能，建议自定义一个继承自MatTableDataSource的数据源类：

  import { MatTableDataSource } from '@angular/material/table';
  import { Store } from '@ngrx/store';
  import { AppState } from '../store/app.state';
  import { selectUsers } from '../store/user.selectors';
  import { Subscription } from 'rxjs';
  import { User } from './user.model';
  
  export class UsersDataSource extends MatTableDataSource<User> {
    private dataSubscription: Subscription;
  
    constructor(private store: Store<AppState>) {
      super();
      // 订阅Store数据，更新DataSource的data属性
      this.dataSubscription = this.store.pipe(select(selectUsers))
        .subscribe(userData => {
          this.data = userData.data; // 这里确保取到的是数组
        });
    }
  
    // 组件销毁时取消订阅，避免内存泄漏
    ngOnDestroy() {
      this.dataSubscription.unsubscribe();
    }
  }
  

• 然后在组件中实例化这个自定义数据源：

  dataSource: UsersDataSource;
  
  constructor(private store: Store<AppState>) {
    this.dataSource = new UsersDataSource(store);
  }
  

• 模板中直接使用这个数据源：

  <table mat-table [dataSource]="dataSource">
  

3. 确认Store中的数据是否正确更新 #

虽然你说Store/Effects没问题，但还是建议再检查Reducer是否正确处理了获取数据的Action：

export interface UserState {
  users: User[];
  loading: boolean;
}

const initialState: UserState = {
  users: [],
  loading: false
};

export function userReducer(state: UserState = initialState, action: UserActions): UserState {
  switch (action.type) {
    case UserActionTypes.LoadUsersSuccess:
      return {
        ...state,
        users: action.payload, // 确保payload是从后端拿到的用户数组
        loading: false
      };
    // 其他Action处理逻辑
    default:
      return state;
  }
}

可以用Redux DevTools查看Store的状态，确认users字段确实是你期望的数组数据。

4. 检查模板列定义是否匹配数据结构 #

有时候数据是对的，但列定义的matColumnDef和数据对象的属性不匹配，也会导致表格不显示数据：

• 确保列定义的属性名和User对象的属性完全一致：

  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> 用户ID </th>
    <td mat-cell *matCellDef="let user"> {{user.id}} </td>
  </ng-container>
  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> 用户名 </th>
    <td mat-cell *matCellDef="let user"> {{user.username}} </td>
  </ng-container>
  

• 同时要保证displayedColumns数组包含所有列名：

  displayedColumns: string[] = ['id', 'username'];
  

• 表头和行的定义要和displayedColumns对应：

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  

你可以按照上面的步骤逐一排查，大概率能找到问题所在。如果还是不行，可以把你的组件模板代码、Selector和Reducer的相关代码补充出来，这样能更精准地定位问题~

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