使用combinelatest查询AngularFire2中的数据

Question

我可以使用我的问题querying subset from angularfire2来实现一些过滤行为。现在我想使用ngFor在Angular中将这些值显示为列表。在我的ts文件中，我有：

export class OtherAnimals{

    public animalList: Observable<{}>;

    constructor(public af: AngularFire) {

        this.animalList = Observable.combineLatest(

            this.af.database.object('/set1/'),
            this.af.database.object('/set2/'),

            // Use the operator's project function to emit an
            // object containing the required values.

            (set1, set2) => {
                let result = {};
                Object.keys(set1).forEach((key) => {
                    if (!set2[key]) {
                        result[key] = this.af.database.object('/allanimals/' + key);
                    }
                });
                return result;
            }
        );
    }
}

在我的.html文件中我有：

<ul>
<li *ngFor="let item of animalList | async">{{item.name}}</li>
</ul>

Answer 1

可能值得建立一个带有animalId的子组件，然后为你获取动物信息，然后显示它。这样你就可以在其他地方重复使用它。此外，您不必一次性构建疯狂的switchMaps或其他一些复杂的Observable模式来解决所有问题。

其他-animals.component.html

<ul>
  <li *ngFor="let animalId of animalList | async">
    <animal-item [animalId]="animalId"></animal-item>
  </li>
</ul>

其他-animals.component.ts

export class OtherAnimalsComponent {
  private animalKeys: Observable<any>;

  constructor(public af: AngularFire) {
    this.animalKeys = Observable.combineLatest(
      this.af.database.object('/set1'),
      this.af.database.object('/set2'),
      (set1, set2) => {
        let list = [];
        Object.keys(set1).forEach((key) => {
          if (!set2[key]) { list.push(key); }
        });
        return list;
      }
    );
}

<强>动物item.component.html

<span>{{ (animalInfo | async)?.name }}</span>

<强>动物item.component.ts

@Component({
  selector: 'animal-item',
  templateUrl: 'animal-item.component.html'
})
export class AnimalItemComponent implements OnInit {
  @Input() animalId: string;
  animalInfo: Observable<any>;

  constructor (private af: AngularFire) {}

  ngOnInit () {
    this.animalInfo = this.af.database.object(`/allanimals/${animalId}`);
  }
}