javascript - 在 ES6 中处理 undefined variable 或属性

Question

在我的特定情况下，我使用的是 Angular 和 Firebase Firestore，但是，这个问题也可能与 Typescript 和纯 Javascript 相关。

我的应用程序完全依赖于我从 Firestore 获取的数据。 我将生成的最小、可重现的代码示例如下所示。

TS:

export class EditStudentComponent implements OnInit {

  user:Object = {};

  ngOnInit() {
      this.NgProgress.start()
      this.fb.user$.subscribe(user => {
        this.user = user;
      })
  }
}

HTML:

User-Info:
Name: {{ user.name }}<br>
Age: {{ user.age }}<br>

在这种情况下，不存在的属性 name 或 age 会引发错误。 有没有比对每个属性都做这样的事情更好的方法？

export class EditStudentComponent implements OnInit {

  user:Object = {};

  ngOnInit() {
      this.NgProgress.start()
      this.fb.user$.subscribe(user => {
        this.user = user;

        //Setting default values for all properties individually
        this.user.name = 'name' in this.user ? (this.user as any).name : 'No value found';
        this.user.age = 'age' in this.user ? (this.user as any).age : 'No value found';
      })
  }
}

Answer 1

您的情况有多种解决方案，您不需要为每个属性添加额外的 ts 代码。

在属性前面使用问号 ? 来检查它是否存在，那么输出将只是空白。

{{ user?.name }}

对于嵌套属性也是一样。

{{ user?.name?.first }}

使用或运算符||，然后您可以决定您的默认值。

{{ user?.name || 'Default name' }}

或者您编写了一个管道，这将是一种过大的杀伤力，并且与第二种解决方案有点相同。