在 Angular 中异步/等待后 DOM 不更新答案

【问题标题】：DOM doesn't update after async/await in Angular在 Angular 中异步/等待后 DOM 不更新
【发布时间】：2021-04-26 14:17:11
【问题描述】：

我正在使用 Amplify for Angular 进行用户身份验证，并且正在为用户配置文件构建一个小菜单。我想检索当前用户信息并在菜单按钮中显示用户的电子邮件。但是，在从 Amplify Auth API 检索用户数据后，DOM 不会更新，即使在确认数据成功进入之后也是如此。

HTML：

  <button mat-icon-button #profile [matMenuTriggerFor]="menu">
    <mat-icon>account_circle</mat-icon>
  </button>
  <label class="user" for="profile">{{ user?.attributes.email }}</label>

TS（注意this.user取数据后成功登录到控制台）：

  async ngOnInit() {
    await Auth.currentUserInfo()
      .then((data) => {
        this.user = data;
        console.log(this.user); // This successfully prints the user data
      })
      .catch((err) => {
        console.log(err);
      });
  }

更奇怪的是，如果您单击菜单按钮，DOM 最终会以某种方式更新以使用户数据可见。此处录屏：https://i.imgur.com/nRAnfax.mp4

为什么在获取用户数据后 DOM 没有立即更新？为什么这似乎只在从 Amplify 检索数据时发生？

【问题讨论】：

stackoverflow.com/questions/34827334/…

标签： angular async-await aws-amplify

【解决方案1】：

您可能在“区域”之外尝试在 NgZone 中运行您的代码也可以手动调用changedetector机制

第三种选择是使用可观察对象（并在 DOM 中使用 | async）

你的then 和你的await 也是多余的

try {
     this.user = await Auth.currentUserInfo();
} catch(err) {
        console.log(err);
}

或者

    Auth.currentUserInfo()
      .then((data) => {
        this.user = data;
        console.log(this.user); // This successfully prints the user data
      })
      .catch((err) => {
        console.log(err);
      });

【讨论】：

【解决方案2】：

您正在使用.then() 回调来解决承诺，因此您不需要使用await 和async 表示法。您的 ngOnInit() 函数应该如下所示：

ngOnInit() {
   Auth.currentUserInfo()
      .then((data) => {
        this.user = data;
        console.log(this.user); // This successfully prints the user data
      })
      .catch((err) => {
        console.log(err);
      });
  }

【讨论】：