Angular 无法读取null的属性-属性加载速度不够快，无法进行绑定？

在聊天室窗口中，“我的应用程序”使用身份验证服务中的currentUser.name向用户致意。 它按预期工作，但同时抛出5个重复错误：

错误类型错误：无法读取null的属性“name”

我不知道为什么应用程序会抛出这么多，但我知道原因是，在呈现DOM之前，属性的加载速度不够快

如何使DOM等待绑定加载

.ts文件：

  constructor(private auth: AuthService)
  {}

  ngOnInit() {
    this.auth.currentUser.subscribe(user => {
      this.currentUser = user;
    });
  }

html：

  <div class="select-room-message">
    Choose a Chat, {{this.currentUser.name}}
  </div>

我的身份验证服务：

  public currentUser: Observable <User | null>;


  constructor(
    private router: Router,
    private alertService: AlertService,
    private afAuth: AngularFireAuth,
    private db: AngularFirestore,
  ) {
    this.currentUser = this.afAuth.authState
    .pipe(switchMap((user) => {
      console.log('user ' + user);
     if (user) {
       return this.db.doc<User>(`users/${user.uid}`).valueChanges();
     } else {
       return of(null);
     }
   }));
 }

---

只需将您的HTML设置为：

<div class="select-room-message">
    Choose a Chat, {{currentUser?.name}}
</div>

---

这个？被称为安全导航运算符，在定义currentUser之前，它不会尝试读取属性名称。

由于currentUser是可观察的，因此您需要使用来对其更改作出反应。如果可以为空/未定义，则需要安全导航操作符指出

<div class="select-room-message">
    Choose a Chat, {{(currentUser | async)?.name}}
</div>