Javascript 异步Firestore函数使HTML中的应用程序崩溃

我有一个这样的函数：

  async profilePhoto(id) {
    const docRef: AngularFirestoreDocument<any> = this.colRef.doc(id);
    const promise = await docRef.ref.get();
    const photoUrl = await promise.get('photoURL');
    console.log(photoUrl);
    return photoUrl;
  }

而且效果很好。将日志记录到url

但是当我试着用HTML调用它时

<img [src]="userService.profilePhoto('userId123')" />

---

应用程序崩溃。浏览器冻结。有什么想法吗？

你不应该这样做吗

const promise=wait docRef.get（）而不是
const promise=wait docRef.ref.get（）？看看应用程序是否崩溃，肯定会有一条错误消息描述出什么地方出了问题。请编辑该问题以显示所有相关信息。docRef.ref.get（）的工作原理与我在.ts文件中所说的一样。问题是Html。我想这是关于异步的事情。Img标记位于异步ngFor循环中。由于崩溃，我看不到任何控制台消息：/您不应该执行
const promise=wait docRef.get（）而不是
const promise=wait docRef.ref.get（）？看看应用程序是否崩溃，肯定会有一条错误消息描述出什么地方出了问题。请编辑该问题以显示所有相关信息。docRef.ref.get（）的工作原理与我在.ts文件中所说的一样。问题是Html。我想这是关于异步的事情。Img标记位于异步ngFor循环中。由于崩溃，我看不到任何控制台消息：/
<img [src]="userService.profilePhoto('userId123')" />