Угловая асинхронная труба висит на обещании - PullRequest
0 голосов
/ 20 ноября 2018

это фрагмент моего шаблона:

<div class="explanation">
 {{ foo() | async }}
</div>

это функция:

  foo(): Promise<string> {
    return Promise.resolve('hello');
  }

Это просто зависает браузер.Как так?чего мне не хватает?

1 Ответ

0 голосов
/ 20 ноября 2018

С MDN на Promise.resolve

Предупреждение. Не вызывайте Promise.resolve для таблицы, которая разрешается сама.Это вызовет бесконечную рекурсию, поскольку она пытается сгладить то, что кажется бесконечно вложенным обещанием.

И

От Избежание AngularРуководство по побочным эффектам :

При оценке выражения шаблона не должно быть видимых побочных эффектов.Язык выражения сам по себе играет свою роль, чтобы держать вас в безопасности.Вы не можете ни присвоить значение чему-либо в выражении привязки свойства, ни использовать операторы увеличения и уменьшения.

Кажется, ваша реализация делает именно это.

Исправлено:

В соответствии с предложением wannadream назначьте обещание свойству, а затем используйте это свойство в шаблоне вместе с async pipe:

import { Component } from '@angular/core';

@Component({...})
export class AppComponent  {
  foo: Promise<string>;

  ngOnInit() { 
    this.foo = Promise.resolve('hello'); 
  }
}

И в шаблоне:

<div class="explanation">
  {{ foo | async }}
</div>
...