метод поиска не работает на RxJs Наблюдаемый

Question

Я использую NgRx в своем приложении angular2. Тем не менее, я испытываю трудности с использованием метода find на моем Observable.

Переводы для моего приложения поступают из внешнего приложения через отдых и хранятся в хранилище NGRX в качестве объекта значения ключа. Этот объект имеет ключевую переменную с кодом и переменную перевода.

Когда я пытаюсь реализовать метод find, чтобы найти правильный объект перевода, он не работает.

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

Кто-нибудь знает, что я делаю неправильно?

Благодаря

Answer 1

Если предположить, что uiMessages$ является Observable, вы не можете просто использовать .find и ожидать, что объект, поскольку find является rxjs-оператор и rxjs-операторы всегда будут возвращать Observable.

Что вы можете сделать, это:

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

, а затем использовать async -pipe дополнительно:

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