Angular 5 - 在加载数据之前停止未定义对象的错误

Question

从未定义的对象中防止控制台错误的最佳方法是什么？

假设我有这个

name : string;
constructor(private data: DataService) {
this.data.name.subscribe(res => this.name = res);
}

在我的HTML中,我有这个

<p> {{name}}</p>

当我加载页面时,我_co.name没有定义,但页面仍显示值name.在我获取数据之前,组件正在加载.

防止这种情况的最佳方法是什么？

我看到ngIf的不是null或类似的东西,是一种选择.但后来我看到了一些关于Resolve的内容.

Answer 1

多种方式:您可以使用任何适合您的方式.

1.添加ngIf:如果name是undefined或null或''它不会使元素和防止控制台错误.当name被定义的值会自动更新视图.

*ngIf="name"

2.添加异步管道:无论何时name定义,视图都会更新.它等待name定义.

{{ name | async }}

3.添加回退值:这只是or条件.如果name是undefined或null或'',您可以决定分配哪个回退值. {{ name || "" }}

Answer 2

只需初始化您的变量

name : string = "";

或者你可以在构造函数里面做

this.name = "";