Вызовите асинхронные функции (наблюдаемые настройки) из шаблона HTML

Question

Данные, отображаемые в шаблоне HTML, являются данными формы ключа.Смысл, это нужно перевести.Для этого я хотел бы вызвать функцию Async из моего шаблона.Пробовал это, но безуспешно:

Шаблон:

<span class="myClass-rowValue">{{translateServingStyle(size.defaultServingStyle?.surcharge) | async}}</span>

Файл компонента ts:

servingStylesData$: Observable<ServingStyles_servingStyles[]>;

ngOnInit(): void {
    this.servingStylesData$ = of(this._apollo
      .watchQuery<ServingStyles>({
        query: ServingStylesQuery
      }))
      .pipe(
        filter((query) => !!query),
        switchMap((query) => query.valueChanges),
        take(1),
        takeUntil(this._ngOnDestroy),
        map((response) => response.data.servingStyles)
      );
}

translateServingStyle(servingStyleValue: string): Observable<string> {
    return this.servingStylesData$
      .pipe(
        map((servingStyles) => servingStyles
          .filter((servingStyle) => servingStyle.value === servingStyleValue)
          .map((selectedServingStyle) => selectedServingStyle.value)[0]
          )
      );
  }

Чтозачем делать это?

# Edit

Это приводит к сбою моего браузера.Приступая к бесконечному циклу, вызывая translateServingStyle ()

Я попытался удалить код своей функции и просто возвратил

of("some string")

, и он отлично работает.

Но при ссылке на Pipe к локальной переменной эта петля происходит.Может кто-нибудь объяснить, почему?

Answer 1

tl; dr Не используйте асинхронный канал с вызовами функций.Это дорого и долго работает и может разрушить пользовательский опыт или в вашем случае привести к сбою вашего браузера: управляйте своими наблюдаемыми объектами самостоятельно, а не с помощью простой в использовании async pipe.

Есливы все еще хотите использовать async канал с функцией, вы можете попробовать использовать ChangeDetectionStrategy.OnPush .Это связано с другими недостатками, такими как запуск обнаружения изменений вручную, например, с this.cdr.detectChanges(); и cdr типа ChangeDetectorRef.

---

Пожалуйста, имейте в виду, как работает система Angulars Lifecycle.

Поскольку значения оцененных функций не имеют внутренней ссылки (которую Angular использует для проверки того, изменились ли значения или нужно ли их обновить), они не будут проверяться ловушкой жизненного цикла ngOnChanges, а скорее с помощью ngDoCheck, который запускается много раз .

Это особенно плохо с трубами и хуже всего с асинхронной трубой.Если мы назовем ваше использование async труб дорогостоящим и длительным, Angular заявляет, что:

Дорогой и долговечный трубопровод может разрушить пользовательский опыт

или в вашем случае вылетает браузер.

Пожалуйста, найдите эту запись в блоге для дальнейшего объяснения.