Angular11 Observable<User[]>无find属性且CRUD不实时刷新如何解决

users2的类型是Observable<User[]>，属于RxJS响应式流对象，并非普通数组，只有数组原型才挂载了find、filter等方法，直接在Observable对象上调用数组方法就会抛出该错误。同时你直接对Observable重新赋值的写法也无法触发流的更新，自然无法同步视图。

推荐使用BehaviorSubject做本地状态管理，它既可以保存当前状态的快照，也可以作为Observable被模板的async管道订阅，自动响应状态变更更新视图：

1. 导入依赖

import { BehaviorSubject, first } from 'rxjs';

2. 修改用户流声明

// 替换原有的 users2!: Observable<User[]>;
private usersSubject = new BehaviorSubject<User[]>([]);
// 暴露给模板的可观察流，按惯例加$后缀标识Observable类型
users$ = this.usersSubject.asObservable();

3. 修改初始化拉取用户列表的逻辑
   将你原来给users2赋值的接口请求逻辑改成如下写法，把拉取到的用户列表同步给usersSubject：

// 原逻辑示例：this.users2 = this.api.getUsers();
// 改为：
this.api.getUsers().subscribe(users => this.usersSubject.next(users));

4. 模板适配修改
   把循环部分的流替换为新声明的users$：

<tr *ngFor="let user of users$ | async">
<!-- 其余模板代码保持不变 -->
</tr>

5. 修复deleteUser方法逻辑

deleteUser(id: string): void {
  // 从BehaviorSubject中获取当前用户列表的快照
  const currentUsers = this.usersSubject.value;
  const targetUser = currentUsers.find(x => x.id === id);
  if (!targetUser) return;

  // 先更新删除中状态，触发视图刷新展示加载态
  const pendingUsers = currentUsers.map(user => 
    user.id === id ? {...user, isDeleting: true} : user
  );
  this.usersSubject.next(pendingUsers);

  this.api.delete(id)
    .pipe(first())
    .subscribe(() => {
      // 删除成功后过滤掉已删除用户，更新状态触发视图刷新
      const updatedUsers = currentUsers.filter(x => x.id !== id);
      this.usersSubject.next(updatedUsers);
    });
}

所有增删改操作都可以沿用该逻辑实现实时响应：

• 新增用户：调用新增接口成功后，把返回的新用户对象追加到当前用户数组末尾，调用usersSubject.next更新状态
• 编辑用户：调用编辑接口成功后，替换当前数组中对应id的用户对象，调用usersSubject.next更新状态

如果需要保证数据和服务端强一致，也可以在CRUD操作成功后重新调用拉取用户列表的接口，用最新的服务端返回值更新usersSubject即可，无需刷新页面。

内容的提问来源于stack exchange，提问作者Mr. Learner