角度9-异步最佳实践？

Question

在从8升级到9之后，html中的异步逻辑不再工作了。

像这样

<div id="app" *ngIf="(applicationsList$ | async) as applicationsList"> <app-search-filter [(applicationsList)]="applicationsList"></app-search-filter> </div>

离开这个问题，https://github.com/angular/angular/issues/34405和常春藤指南https://next.angular.io/guide/ivy-compatibility。

如果你使用它，现在它会抛出一个错误。

错误中不能将值"$event“分配给模板变量"applicationsList”。模板变量是只读的。

我认为这不是一个反模式，因为你可以很容易地处理变化检测与它。

我现在的问题:

替换这种代码以删除错误的最佳实践(优雅的方法)是什么？

我知道有可能用承诺来代替，但这真的是最好的方法吗？

.ts

this.applicationsList = await this.applicationApi.getList().toPromise(); 

.html

<div id="app">
  <app-search-filter [(applicationsList)]="applicationsList"></app-search-filter>
</div>

编辑：

下面是一个带有错误的Stackblitz，如果您在dev控制台中看到的话：

​

​

https://stackblitz.com/edit/angular-ivy-taatzh

Answer 1

将模板变量传递到输出中是有点奇怪的，但是如果您只想简单地使用对象进行黑客攻击。

<div id="app" *ngIf="{list: applicationsList$ | async} as data">
    <app-search-filter [(applicationsList)]="data.list"></app-search-filter>
</div>

我将编写一个单独的处理程序并将模板更新到

<div id="app" *ngIf="(applicationsList$ | async) as applicationsList">
  <app-search-filter [applicationsList]="applicationsList" (applicationsList)="update($event)"></app-search-filter>
</div>