角度 9 - 异步最佳实践？

Posted 2023-02-19

【中文标题】角度 9 - 异步最佳实践？

【英文标题】：angular 9 - async best practises?

【发布时间】：2020-08-26 16:15:06

【问题描述】：

从 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”中的错误。模板变量是只读的。

我认为这不是反模式，因为您可以使用它轻松处理变更检测。

我现在的问题：

替换这种代码以消除错误的最佳做法（优雅方式）是什么？

我知道可以改用 promise，但这真的是最好的方法吗？：

.ts

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

.html

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

编辑：

如果您在开发控制台中看到错误，这里是 Stackblitz：

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

【问题讨论】：

模式本身看起来并没有错。你能在 stackblitz 中重现这个问题吗？

试试这个，在后面的代码中订阅异步调用。将调试器语句放入订阅中。注释掉 html 代码。放入新的 div 中没有任何内容。重新启动导航，然后告诉我们按 f12 进行调试后会发生什么。您应该看到断点命中。你看到了什么价值观？

另外，正如 GitHub 问题中所述，[(applicationsList)]="applicationsList" 可能是错误的来源，而不是使用 async 管道。

我已经将GitHub issue cmets中的stackblitz升级到Angular v9，模式本身的使用还可以。 stackblitz.com/edit/ng-issue-34405-ppcbhy该问题的现场演示将使该问题受益。

@KurtHamilton 您的 stackblitz 版本为 8 。我用错误更新了我的答案

【参考方案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>