获取可观察到的特定索引处的数组元素[Typescript] [英] Get array element in observable at particular index [Typescript]

问题描述

我正在使用Angular4和angularfire2-Firestore运行ionic3应用程序.

I am running an ionic3 app with Angular4 and angularfire2-Firestore.

如何从Observable获取单个对象.我希望返回打字稿.

How does one go about getting a single object from an Observable. I am looking to return in typescript.

console.log(this.opportunity.title)  //   "Title1"

在下面的代码中，我使用getOpportunityByIndex()方法，并将index作为参数.我得到以下输出，我不确定下一步该怎么做.

In the code below I am using the getOpportunityByIndex() method with index as the parameter. I am getting the following output and I'm not sure what to do next.

Observable {_isScalar: false, source: Observable, operator: MapOperator}
    operator:MapOperator {thisArg: undefined, project: ƒ}
    source:Observable {_isScalar: false, source: Observable, operator: MapOperator}
    _isScalar:false
    __proto__:Object

代码

export interface Opportunity { title: string;  }
export interface OpportunityId extends Opportunity { id: string; }

opportunities: Observable<OpportunityId[]>;

  constructor( public firebaseProvider: FirebaseProvider)   {
    this.opportunities = this.firebaseProvider.getOpportunities();
  }

  getOpportunityByIndex(index: number) {            
     this.opportunity = this.opportunities.map(arr => arr[index]);
     console.log(this.opportunity.title);
    }
}

FirebaseProviderService

FirebaseProviderService

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

export interface Opportunity { title: string;  }
export interface OpportunityId extends Opportunity { id?: string; }

@Injectable()
  export class FirebaseProvider {    
  private opportunitiesCollection: AngularFirestoreCollection<OpportunityId>;
  opportunity: Opportunity

  constructor(afs: AngularFirestore) {
    this.opportunitiesCollection = afs.collection<Opportunity>('opportunities');
    this.opportunities = this.opportunitiesCollection.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Opportunity;
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });
  }

   getOpportunities() {
    return this.opportunities;
  }
}

推荐答案

根据我对您的示例的理解，this.opportunities返回的是带有机会的可观察对象.有了这个，您只需要订阅流，然后就可以选择由参数传递的特定索引.这是您需要做的:

From what I understand of your example this.opportunities is returning an observable with the array of opportunities. Having this you just need to subscribe to the stream and then you can pick the specific index passed by parameter. This is what you need to do:

getOpportunityByIndex(index: number) {            
 this.opportunities
 .subscribe( opportunities => {
     this.opportunity = opportunities[index];
     console.log(this.opportunity.title);
  });

}

修改

如果您想使其更加灵活，可以将机会列表设置为常规数组

If you want to make it a bit more flexible you can make the list of opportunities a regular array

opportunities: OpportunityId[]

然后在构造函数中完成

constructor( public firebaseProvider:FirebaseProvider)   {
    this.firebaseProvider.getOpportunities()
    .subscribe( opportunities => {
        this.opportunities = opportunities;
    });

}

然后，您可以随时随地调用它

Then you can simply do whenever you want to call it

getOpportunityByIndex(index: number) {            
   this.opportunity = this.opportunities[index];
   console.log(this.opportunity.title);
}

这篇关于获取可观察到的特定索引处的数组元素[Typescript]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！