在 Angular 6 数据绑定中使用 Promise 函数

Question

我在 Angular 6 数据绑定中使用异步函数时遇到问题：

<span *ngIf="application.status == 'in-progress'; else new">
  {{getAssignedUser(application.user_id)}}
</span>

getAssignedUser() 是一个异步函数，它从 Firestore 获取文档，我想显示我从 Firestore 收到的分配用户的名字。这里唯一的问题是我无法显示名字值 OnInit。如果我插入一个按钮并添加一个单击事件，它会显示名称。

组件：

async getAssignedUser(id): Promise<string> {
    if (id != null) {
        return this._usersService
        .getUserById(id)
        .then(data => {
            this.assignedUser = data.user_fname;
            return this.assignedUser;
        })
    } else {
        return null;
    }
}

服务：

getUserById(id): any {
    let user: any;
    user = this.afs.collection('agents').doc(id).ref.get().then(function (doc) {
        if (doc.exists) {
            user = doc.data();
            console.log(user);
            return user;
        }
        else {
            console.log('No such document');
        }
    }).catch(function (error) {
        console.log('Error getting document: ', error);
    })
    return user;
}

有什么帮助吗？

Answer 1

问题

从 html 调用 getAssignedUser 并期望返回值的问题。这不能保证，因为getAssignedUser 执行异步操作。您曾提到 getAssignedUser 上的异步操作，但不会返回任何 Observable 或 Promise。

解决方案

您需要更改服务和组件。函数应该返回 Promise 来处理这种情况。

服务：

  getUserById(id): any {

    return new Promise((resolve, reject) => {

      this.afs.collection('agents').doc(id).ref.get().then(function (doc) {
        if (doc.exists) {
          user = doc.data();
          console.log(user);
          resolve(user);
        }
        else {
          resolve(null); //<-- you can reject if you want.
        }
      }
    }
  }

组件：

async getAssignedUser(id): Promise<string> {
        return this._usersService
        .getUserById(id);
}

html

<span *ngIf="application.status == 'in-progress'; else new">
  {{getAssignedUser(application.user_id)} | async}
</span>

重要提示：您不应该在 html 中运行，这可能会导致多次调用并影响性能。最好使用函数。

注意：代码直接写入 stackoverflow 编辑器，因此可能存在拼写错误或语法错误。所以请纠正自己。

Answer 2

同意@Sunil Singh 以上答案，模板文件中的小修正。 async 操作符主要用于 observable。您可以在没有它的情况下调用它应该可以工作。

<span *ngIf="application.status == 'in-progress'; else new">
  {{getAssignedUser(application.user_id)}}
</span>