Angular async pipe зависает на обещании
это фрагмент моего шаблона:
<div class = "explanation">
{{ foo() | async }}
</div>
это функция:
foo(): Promise<string> {
return Promise.resolve('hello');
}
Это просто вешает браузер. Почему? что мне не хватает?
Я думаю, что этот сценарий сталкивается с побочными эффектами, упомянутыми в док. angular.io/guide/template-syntax#avoid-side-effects Если поменять на свойство, все работает нормально: stackblitz.com/edit/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Warning: Do not call Promise.resolve on a thenable that resolves to itself. This will cause infinite recursion as it tries to flatten what seems to be an infinitely nested promise.
И
От Руководство Angular: избегайте побочных эффектов:
evaluation of a template expression should have no visible side effects. The expression language itself does its part to keep you safe. You can't assign a value to anything in a property binding expression nor use the increment and decrement operators.
Кажется, ваша реализация именно это и делает.
Исправить:
Как предлагает wannadream, назначьте обещание свойству, а затем используйте это свойство в шаблоне вместе с каналом async:
import { Component } from '@angular/core';
@Component({...})
export class AppComponent {
foo: Promise<string>;
ngOnInit() {
this.foo = Promise.resolve('hello');
}
}
И в шаблоне:
<div class = "explanation">
{{ foo | async }}
</div>
Я не понимаю, чем то, что я сделал, отличается от примера по адресу: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Что ж, то, что вы сделали, было вызвано в шаблоне функцией, возвращающей обещание. Первый пример в MDN присваивает значение, возвращаемое из Promise.resolve, переменной, а затем использует для него then. Это отличается от предложения Wannadream.
То же самое сделал и со мной.