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 = "";

Answer 3

如先前的答复中所述，您可以使用{{ name | async }}，但请记住，如果您想使用{{ name | async }}，名称必须是一个承诺或可观察的。
否则，您将得到如下错误：

ERROR Error: InvalidPipeArgument: 'xxx' for pipe 'AsyncPipe'

Answer 4

您可以在 component.html 中使用 pip install bcrypt cryptography pynacl paramiko 或 {{name?.value}}。可以在compoment.ts中做这样的处理↓

   ````

    this.route.paramMap.pipe(
      map((param: ParamMap) => {
        // @ts-ignore
        return param.params.id;
      })
    ).subscribe(prodId => {
      this.id = prodId;
      this.productService.getSingleProduct(this.id).subscribe(prod => {
        this.product = prod;
        if (prod.images !== null) {
          this.thumbimages = prod.images.split(';');
        }`enter code here`
      });
    });


  ````

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

4 个答案: