Question

在“聊天室”窗口中，我的应用程序使用来自auth服务的currentUser.name问候用户。它可以按预期工作，但同时会引发5次重复的错误：

“错误TypeError：无法读取null的属性'名称'”

我不知道为什么应用程序会抛出这么多，但是我知道原因是，该属性在呈现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);
     }
   }));
 }

Answer 1

只需将您的HTML设置为：

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

此?被称为安全导航操作符，在定义name之前，它不会尝试读取属性currentUser。

Answer 2

由于currentUser是一个Observable，因此您需要使用async pipe对它的更改做出反应。如果它可以为null / undefined，则需要xyz's answer指出的安全nav运算符。

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

无法读取null属性-属性加载速度不足以进行绑定？

2 个答案: