在特定索引处获取可观察的数组元素 [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 正在返回一个包含一系列机会的 observable.有了这个，您只需要订阅流，然后您就可以选择通过参数传递的特定索引.这是你需要做的:

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;
    });

}

然后你可以随时调用它

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

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