Finden Methode funktioniert nicht auf RxJs Observable

Question

Ich benutze NgRx in meiner angular2-Anwendung. Allerdings habe ich Schwierigkeiten, die Suchmethode auf meinem Observable zu verwenden.

Die Übersetzungen für meine Anwendung stammen von einer externen Anwendung über Rest und werden im NGRX-Speicher als Schlüsselwertobjekt gespeichert. Dieses Objekt hat eine Schlüsselvariable mit dem Code und eine Übersetzungsvariable.

Wenn ich versuche, die Find-Methode zu implementieren, um das richtige Übersetzungsobjekt zu finden, funktioniert es nicht.

@Pipe({ 


name: 'translate', 
}) 
export class TranslatePipe implements PipeTransform, OnInit { 

    uiMessages$ = this.sb.uiMessages$; 

    constructor (private sb: AppSandbox) {} 

    transform(value: string, args: any[]): any { 
    return this.uiMessages$.find((uiMessage: UiMessage) => (uiMessage.key === value)).translation; 
    } 

Weiß jemand, was ich falsch mache?

Dank

Answer 1

Unter der Annahme, dass uiMessages$ ein beobachtbar ist, Sie .find nicht nur können ein Objekt verwenden und erwarten, als find ein rxjs-Betreiber und rxjs-Betreiber ist immer eine beobachtbare zurück.

Was könnten Sie tun, ist:

transform(value: string, args: any[]): any { 
    return this.uiMessages$ 
     .switchMap((uiMessages: UiMessage[]) => Observable.from(uiMessages)) 
     .find((uiMessage: UiMessage) => (uiMessage.key === value)) 
     .map((uiMessage: UiMessage) => uiMessage.translation); 
} 

und verwenden Sie dann den async -pipe zusätzlich:

<div>{{'foo' | translate | async}}</div>