DOM 在 Angular 中的 async/await 之后没有更新

Question

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

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 检索数据时？

Answer 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);
      });

Answer 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);
      });
  }

DOM 在 Angular 中的 async/await 之后没有更新

DOM doesn't update after async/await in Angular

async-await

angular

aws-amplify