使用最新的查询从AngularFire2查询数据 [英] Querying data from AngularFire2 with combinelatest

问题描述

我可以用从angularfire2查询子集来实现一些过滤行为。现在我想用ngFor在Angular中显示这些值作为列表。在我的ts文件中，我有：

  export class OtherAnimals {
 
 public animalList：Observable< {}取代; 
 
构造函数（public af：AngularFire）{
 
 this.animalList = Observable.combineLatest（
 
 this.af.database.object（' set1 /'），
 this.af.database.object（'/ set2 /'），
 
 //使用运算符的项目函数发出一个
 // （set1，set2）=> {
 let result = {}; 
 Object.keys（set1）.forEach（（key）=> {
 if（！set2 [key]）{
 result [key] = this.af.database.object（'/ allanimals /'+ key）; 
} 
} ）; 
返回结果; 
} 
）; 
 
 
 code $ 
 $ p $在我的 .html  file我有： 
 
 
 < ul> 
< li * ngFor =let item of animalList | async> {{item.name}}< / li> 
< / ul> 
  
 
 
解决方案
也许值得建立一个子组件需要一个 animalId ，然后它会为你获取动物信息，然后显示它。这样你可以在其他地方重复使用它。另外，您不必构建疯狂的switchMaps或其他复杂的Observable模式，以一次性解决所有问题。
 
 
 
  other-animals.component.html  
 < ul> 
< li * ngFor =let animalId of animalList | async> 
 < / li> 
< / ul> 
  
  other-animals.component.ts  
  export class OtherAnimalsComponent {
 private animalKeys：Observable< any> ;; 
 
构造函数（public af：AngularFire）{
 this.animalKeys = Observable.combineLatest（
 this.af.database.object（'/ set1'），
 （$ set 
 
 $ set 
 
 $ b $ set $ b $ obf （key）=> {
 if（！set2 [key]）{list.push（key）;} 
}）; 
 return list; 
} 
）; 
 
  
  animal-item.component.html  
 < span> {{（animalInfo | async）?. name}}< / span> 
  
  animal-item.component.ts  
  @Component（{
选择器：'animal-item'，
 templateUrl：'animal-item.component.html'
 $）
 export class AnimalItemComponent实现OnInit {
 @Input（）animalId：string; 
 animalInfo：Observable< any>; 
 
构造函数（private af：AngularFire）{} 
 $ b ngOnInit（）{
 this.animalInfo = this.af.database.object（`/ allanimals / $ {animalId}`）; 
} 
} 
  
 
I could achieve some filtering behaviour with my question querying subset from angularfire2. Now I want to display these values as a list in Angular using ngFor. In my ts file I have:
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;
            }
        );
    }
}
and in my .html file I have:
<ul>
<li *ngFor="let item of animalList | async">{{item.name}}</li>
</ul>

解决方案
Might be worth it to build out a sub component that takes an animalId which will then go fetch animal information for you, and then display it. That way you can reuse it in other places. Also you won't have to build out crazy switchMaps or some other complex Observable patterns to solve all in one go.

other-animals.component.html
<ul>
  <li *ngFor="let animalId of animalList | async">
    <animal-item [animalId]="animalId"></animal-item>
  </li>
</ul>
other-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;
      }
    );
}
animal-item.component.html
<span>{{ (animalInfo | async)?.name }}</span>
animal-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}`);
  }
}


                        
这篇关于使用最新的查询从AngularFire2查询数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！