Winkel 2 Weg zu bekommen, Artikel aus Beobachtbare<Xyz[]>

Angesichts der folgenden Typoskript in eine Eckige 2-service:

getLanguages () {
    return this.http.get(this._languagesUrl)
        .map(res => <Language[]> res.json().data)
        .catch(this.handleError);

Ich habe Schwierigkeiten bei der Verwendung dieses in Umständen, in denen ich nachschlagen kann ein bestimmtes Element aus dem array. Zum Beispiel, ich kann nicht die folgenden, weil filter erwartet eine Observable<Language> eher als eine der Observable<Language[]> wird zurückgegeben.

getLanguages().filter(language => language.id == 3) //Error

Ich Schätze, dass mein Problem könnte sein, dass ich Mixe synchrone und asynchrone Verhalten, so dass ich meinen use case: Benutzer können geben Sie eine Sprach-id und ich möchte die Anzeige der zugehörige name der Sprache. Ich möchte zu nutzen getLanguages() mit der Observable Ergebnis da es bereits an anderer Stelle in das Projekt. Ich will auch mit der Umsetzung einiger Zwischenspeichern, damit die HTTP-Anfrage nicht zu bekommen, jedes mal, wenn ich eine Suche.

Irgendwelche Gedanken?

  • was genau Fehler sind Sie immer?
InformationsquelleAutor gxclarke | 2016-02-11
  1. 2

    Hier ein Beispiel, wie Sie arbeiten, was Sie tun möchten:

    https://plnkr.co/edit/lK47pVaW8b0CEez0mum4?p=preview

    Drücken Sie F12 in chrome zu sehen, die Protokolle, um Ihnen eine klare Vorstellung von dem, was vor sich geht und warum es nicht funktioniert in deinem Beispiel.

    Nehmen eine Besondere atention zu:

    constructor(private _langService: LanguagesService) {
    _langService.getLanguages() //We get an Observable<Array> object returned.
        //So this is the observable's filter function:
        .filter( this._filter3rdLanguage )
        //The filter gets called only once and its comparing an observable object, not a language object.
        //that's why nothing gets filtered:
        .do( o => console.log(o) )
        //If you filter the actual list instead of the observable object, you'll get it called several times.
        //This is the Array's filter function.
        .subscribe( list => this.languages = list.filter( this._filter3rdLanguage ) );
}

    Dies ist eine andere, vielleicht bessere, Möglichkeit, es zu tun:

      _langService.getLanguages()
    .map( list => list.filter(this._filter3rdLanguage) )
    //see that this one IS filtered.
    .do( list => console.log(list) )
    .subscribe( list => this.languages = list );
    • Danke! Logging-Elemente auf der Konsole in dieser Art und Weise hat mir geholfen, zu sehen, dass ich bin nur immer ein Objekt, das ein array mit den Objekten möchte ich einen filter auf.
    InformationsquelleAutor Langley
  2. 7

    finden Element in Beobachtbare<Typ>

        let item: Language;
    langugages. //observable cached data
        .subscribe((items: Language[]) => item = items.find(p => p.id == 3));
    InformationsquelleAutor hadi
  3. 2

    Können Sie mergeMap statt map zu verflachen array:

    getLanguages () {
    return this.http.get(this._languagesUrl)
        .flatMap(res => Rx.Observable.fromArray(<Language[]> res.json().data))
        .catch(this.handleError);

}

    Nun den Rückgabewert von getLanguages wird ein Observable<Language>

    InformationsquelleAutor paulpdaniels
  4. 1

    Wenn Sie Folgen Sie den map Methode mit subscribe können Sie den Zugriff auf Mitglieder der Language array, wenn das array zur Verfügung:

    return this.http.get(this._languagesUrl)
  .map(res => <Language[]> res.json().data)
  .subscribe((languages: Language[]) => alert(languages[3]); );
    InformationsquelleAutor MatthewScarpino
  5. 0

    Dies ist so etwas wie eine Vermutung, da ich bisher noch nicht genutzt habe RxJS persönlich, aber ich bin interessiert. Durchsicht der Dokumente, Frage ich mich, ob Folgendes funktionieren würde:

    function getLanguageName(id: number): Observable<string> {
    return getLanguages()
              .map((langs: Language[]) => _.find(langs, { id: id }))
              .pluck('name');
}

    Ich verwendet, Lodash ist _.find() zu finden, der passende Eintrag im array zu, aber wenn Sie es nicht haben, können Sie immer führen Sie die Suche manuell ein oder verwenden Sie .filter(langs, ...)[0].

    Wenn Sie wollen, um das Zwischenspeichern, und Sie wissen, dass der name einer Sprache für eine bestimmte id wird sich nie ändern, Sie könnte verwenden, Lodash ist _.memoize() - Funktion, um die Wiederverwendung der output für einen gegebenen input.

    Ich bin gespannt zu sehen, ob das funktioniert für Sie.

    InformationsquelleAutor GregL
  6. 0

    Für ein Kunden-service-app, die ich bin Unterstützung, die ich brauchte, eine Möglichkeit zum ein-oder ausblenden-Schaltflächen, je nachdem, ob oder nicht ein Benutzerkonto hatte einen bestimmten Geschäftsbereich, und ich brauchte, um auf die asynchronen Daten, die geladen werden auf der Seite, und nicht unbedingt die Daten verwenden, wie Sie ist. Also ich rufe eine Methode aus der Vorlage und Verwendung von map mit finden, dann abonnieren.

          <button *ngIf="(lobs$ | async) ? getButtonVisibility('internet') : false" class="eing-account-header-drawers-button" (click)="openDrawer(drawers[drawers.internet],$event)">


public getButtonVisibility(lobName: string) {
  let isVisible;
  this.lobs$.map(x =>
    x.findIndex(y =>
      y.lobName.toLowerCase() == lobName.toLowerCase() && y.hasLob))
        .subscribe(x => { isVisible = x != -1});
  return isVisible;      
}
    InformationsquelleAutor David Spenard
Schreibe einen Kommentar