Angular - Rx JS - Наблюдаемый и возврат метода - PullRequest
Новая
       3

Angular - Rx JS - Наблюдаемый и возврат метода

0 голосов
/ 21 марта 2020

В моем приложении Angular 9 есть метод, который выглядит следующим образом: 

createTitleHTMLText(calendarEventObject: CalendarEventObject): string { 
this.translateService.get(calendarEventObject.calendarEventTyp).subscribe((res: string) => {
  const title = '<span><b>' + calendarEventTyp + '</b></span>;
  return title;
});

}

Этот метод должен возвращать строку, но как это сделать - получить Мне нужен Observable, и дальнейший код должен быть в блоке Observable - result. На самом деле я не знаю, как это сделать - есть ли способ синхронизации Observables или как это лучше всего сделать?

Ответы [ 4 ]

0 голосов
/ 21 марта 2020

Если я правильно понимаю, у вас есть Observable, который испускает строку, например, вызов http удаленному сервису, который возвращает (асинхронно) строку. В вашем случае это сервис this.translateService.get(calendarEventObject.calendarEventTyp).

Затем у вас есть метод createTitleHTMLText(calendarEventObject: CalendarEventObject), который вызывает сервис, и вы хотите, чтобы этот метод возвращал строку, выданную асинхронным сервисом.

Если это то, что вы хотите, вы просто не можете этого достичь. Причина в том, что служба является асинхронной.

Что вы можете захотеть изучить, так это решение в этом направлении 

createTitleHTMLText(calendarEventObject: CalendarEventObject): Observable<string> { 
  this.translateService.get(calendarEventObject.calendarEventTyp).pipe(
     map((res:   string) =>. '<span><b>' + calendarEventTyp + '</b></span>')
  )
}

В этой версии функция createTitleHTMLText возвращает Observable тому, кто интересно. На такое Observable можно подписаться, где это необходимо, например, с помощью шаблона Angular async.

0 голосов
/ 21 марта 2020

Я использую это как в этом примере: 

fetchEvents(): void {
  this.events$ = this.datechoiceService.getPreparedCalendarEventsOfUser(this.user.id, this.view, this.viewDate)
 .pipe(
   map(results => {
     return results.map((calendarEventObject: CalendarEventObject) => {
      let calendarEvent: CalendarEvent<{ calendarEvent: CalendarEvent<any>; }> = {
        id: calendarEventObject.id,
        actions: this.actions,
        start: new Date(calendarEventObject.startsAt),
        end: new Date(calendarEventObject.endsAt),
        title: this.createTitleHTMLText(calendarEventObject),
        ...
      };
      return calendarEvent;
     })
   })
 );

}

0 голосов
/ 21 марта 2020

Вы можете преобразовать наблюдаемое в обещание и использовать asyn c / await, 

async createTitleHTMLText(calendarEventObject: CalendarEventObject): string {
    const calendarEventTyp = await this.translateService.get(calendarEventObject.calendarEventTyp).toPromise();
    return '<span><b>' + calendarEventTyp + '</b></span>';
}
0 голосов
/ 21 марта 2020

Немного неясно в данный момент. Вы подписываетесь на HTTP-запрос, но не используете его результат. Какое значение res здесь? Тем не менее, я думаю, что вам нужно следующее 

createTitleHTMLText(calendarEventObject: CalendarEventObject): string { 
  this.translateService.get(calendarEventObject.calendarEventTyp).subscribe((res: string) => {
    return '<span><b>' + res + '</b></span>';
  });
}
...