Angularfire2如何根据answeredStudents存在性过滤问题列表，隐藏用户已答问题

首先我先明确你的需求：你的Firebase数据里，每个questions节点下的问题都有answeredStudents子节点，存储已经回答过该问题的用户ID。你需要在页面上只展示当前登录用户还没回答过的问题，已经回答过的就隐藏。

先看看你现在的代码实现，然后一步步修改：

你当前的代码 #

数据获取方法（TypeScript） #

getQuizesSeries() { 
  let ref = this.afDB.list('questions').snapshotChanges() 
    .map(changes =>{ 
      console.log(changes); 
      return changes.map(c=> ({key:c.payload.key,...c.payload.val()})); 
    }); 
  return ref; 
}

组件内调用 #

questions:Observable<any[]>; 
quizes:any; 
constructor(
  public navCtrl: NavController, 
  public afDb:AngularFireDatabase ,
  public navParams: NavParams,
  public dataProvider:DataProvider
) { 
  this.quizes = this.dataProvider.getQuizesSeries(); 
}

HTML展示 #

<ion-list *ngFor="let quiz of quizes |async;let i = index;" > 
  <ion-item (click)="passkey(quiz.key)" > 
    <p>{{quiz.name}}</p> 
  </ion-item> 
</ion-list>

修改方案 #

要实现筛选逻辑，核心是在获取数据时，结合当前用户的ID过滤掉已回答的问题，具体步骤如下：

1. 先拿到当前登录用户的ID #

首先你需要从身份验证服务中获取当前用户的UID，比如用AngularFireAuth的话：

// 先导入AngularFireAuth
import { AngularFireAuth } from '@angular/fire/auth';

// 在组件类里定义变量存储用户ID
currentUserId: string;

constructor(
  // ...其他依赖
  private afAuth: AngularFireAuth
) {
  // 监听用户登录状态，拿到当前用户ID
  this.afAuth.authState.subscribe(user => {
    if (user) {
      this.currentUserId = user.uid;
    }
  });
}

2. 修改数据获取方法，添加过滤逻辑 #

更新getQuizesSeries方法，传入当前用户ID，在映射数据后过滤掉已回答的问题：

getQuizesSeries(currentUserId: string) { 
  return this.afDB.list('questions').snapshotChanges() 
    .pipe(
      map(changes => {
        return changes
          .map(c => ({ key: c.payload.key, ...c.payload.val() }))
          // 过滤逻辑：只保留当前用户未回答的问题
          .filter(quiz => {
            // 处理answeredStudents不存在的情况（视为未回答）
            if (!quiz.answeredStudents) return true;
            // 这里假设answeredStudents是对象，键为用户ID（Firebase常用存储方式）
            // 如果是数组的话，改成 !quiz.answeredStudents.includes(currentUserId)
            return !Object.keys(quiz.answeredStudents).includes(currentUserId);
          });
      })
    );
}

注意：如果你的answeredStudents是数组类型（直接存用户ID数组），把过滤条件换成!quiz.answeredStudents.includes(currentUserId)就可以了。

3. 调整组件内的调用逻辑 #

要确保拿到用户ID后再请求数据，避免空值问题：

questions: Observable<any[]>; 
quizes: Observable<any[]>; 

constructor(
  public navCtrl: NavController, 
  public afDb: AngularFireDatabase ,
  public navParams: NavParams,
  public dataProvider: DataProvider,
  private afAuth: AngularFireAuth
) { 
  this.afAuth.authState.subscribe(user => {
    if (user) {
      // 传入当前用户ID，获取过滤后的问题列表
      this.quizes = this.dataProvider.getQuizesSeries(user.uid);
    }
  });
}

4. HTML部分无需修改 #

原来的HTML代码可以直接用，async管道会自动处理Observable的订阅和数据更新。

这样修改后，页面就只会显示当前用户还没回答过的问题啦！

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