基于JavaScript对象值过滤Firestore Observable及重复团队处理

首先咱们从数据层处理入手，利用你现有的数据服务，先把已选团队的ID提取出来——对比ID是最可靠的判断方式，能避免因为数据字段差异导致的判断失误：

1. 在数据服务中处理已选团队ID #

在你的管理数据服务里，新增一个Observable专门输出已选团队的ID数组，用RxJS的map操作符从snapshotChanges()的结果里提取每个文档的id：

// 假设你的服务里已有获取用户已选团队的方法
getUserSelectedTeams(): Observable<Team[]> {
  return this.firestore.collection('user-teams', ref => ref.where('userId', '==', currentUserId))
    .snapshotChanges()
    .pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as Team;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
}

// 新增：获取已选团队的ID数组Observable
getSelectedTeamIds(): Observable<string[]> {
  return this.getUserSelectedTeams().pipe(
    map(teams => teams.map(team => team.id))
  );
}

2. 在组件中结合可选团队与已选状态 #

在添加团队的组件里，咱们用combineLatest把所有可选团队和已选团队ID这两个Observable合并，这样每次其中一方数据变化，都能实时给每个可选团队标记「是否已被选中」的状态：

import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

// 组件类中
availableTeamsWithStatus$: Observable<{ team: Team; isSelected: boolean }[]>;

constructor(private dataService: YourDataService) {
  // 假设你有获取所有可选团队的方法
  const allAvailableTeams$ = this.dataService.getAllAvailableTeams();
  const selectedTeamIds$ = this.dataService.getSelectedTeamIds();

  this.availableTeamsWithStatus$ = combineLatest([allAvailableTeams$, selectedTeamIds$]).pipe(
    map(([allTeams, selectedIds]) => {
      return allTeams.map(team => ({
        team,
        isSelected: selectedIds.includes(team.id)
      }));
    })
  );
}

3. UI层实现高亮与禁用 #

在模板里遍历处理后的availableTeamsWithStatus$，根据isSelected属性添加高亮样式，同时禁用已选中团队的添加按钮：

<div *ngFor="let teamItem of availableTeamsWithStatus$ | async" 
     [class.highlighted-team]="teamItem.isSelected">
  <h3>{{ teamItem.team.name }}</h3>
  <p>{{ teamItem.team.description }}</p>
  <button 
    (click)="handleAddTeam(teamItem.team)"
    [disabled]="teamItem.isSelected">
    {{ teamItem.isSelected ? '已添加' : '添加团队' }}
  </button>
</div>

再给高亮样式写个简单的CSS：

.highlighted-team {
  border: 2px solid #2196F3;
  background-color: rgba(33, 150, 243, 0.1);
  border-radius: 4px;
  padding: 10px;
}

4. 双重校验：服务层再做一次拦截 #

为了彻底避免重复添加（哪怕前端校验被绕过），在服务的添加方法里再做一次ID校验：

// 数据服务中的添加团队方法
async addTeamToUser(teamId: string, userId: string): Promise<void> {
  // 先获取当前已选团队ID，做一次校验
  const selectedIds = await this.getSelectedTeamIds().pipe(take(1)).toPromise();
  if (selectedIds.includes(teamId)) {
    throw new Error('该团队已添加到你的账户中');
  }
  // 执行添加操作
  return this.firestore.collection('user-teams').add({
    userId,
    teamId,
    addedAt: new Date()
  });
}

这样一套流程下来，前端能直观展示已选状态，前后端双重拦截重复添加，完美解决你的问题～

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