如何使用AngularFire2从Firebase检索无重复的Model字段值？

我来帮你搞定这个需求！要从Firebase集合里提取唯一的model字段值（比如只显示"iphone 6"和"iphone 7"，不管它们重复多少次），有两种实用的实现方式，你可以根据自己的场景来选：

方法一：前端层面去重（兼容所有AngularFire版本） #

这种方法先把集合里的所有文档数据拉到前端，再通过JavaScript的Set来实现去重，适合集合数据量不大的场景，或者你的SDK版本不支持数据库层面的去重特性。

在你的Angular组件里可以这么写：

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-unique-models',
  template: `
    <h2>唯一设备型号</h2>
    <div *ngFor="let model of uniqueModels$ | async">
      {{ model }}
    </div>
  `
})
export class UniqueModelsComponent {
  // 定义一个Observable来存储去重后的型号列表
  uniqueModels$ = this.firestore.collection('你的集合名称').valueChanges()
    .pipe(
      map(documents => {
        // 先提取所有文档里的model字段
        const allModels = documents.map(doc => doc['model']);
        // 用Set去重，再转成数组
        return Array.from(new Set(allModels));
      })
    );

  constructor(private firestore: AngularFirestore) {}
}

这段代码的逻辑很简单：通过valueChanges()获取集合的实时数据，接着用RxJS的map操作符提取所有model字段，最后用Set自动去重，再转回数组供模板渲染。

方法二：数据库层面去重（推荐，性能更优） #

如果你的Firebase SDK和AngularFire版本足够新（Firestore支持distinct()查询特性），推荐用这种方法——直接在数据库层面完成去重，减少前端的数据传输量，性能更好，尤其是集合数据量大的时候。

代码示例如下：

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-unique-models',
  template: `
    <h2>唯一设备型号</h2>
    <div *ngFor="let model of uniqueModels$ | async">
      {{ model }}
    </div>
  `
})
export class UniqueModelsComponent {
  uniqueModels$ = this.firestore.collection('你的集合名称', ref => 
    // 指定只查询model字段，并对该字段去重
    ref.select('model').distinct()
  ).valueChanges()
  .pipe(
    // 把返回的文档对象转成纯型号字符串
    map(docs => docs.map(doc => doc['model']))
  );

  constructor(private firestore: AngularFirestore) {}
}

这里用了Firestore的select('model')只返回需要的字段，再配合distinct()让数据库直接返回唯一的model值，最后把结果转成字符串数组即可。

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