angular2:错误:TypeError:无法读取未定义的属性“..." [英] angular2: Error: TypeError: Cannot read property '...' of undefined

问题描述

我附上了我的 angular2 代码块的 plunker.我想从我的 JSON 打印一个字段，但无法打印它，因为最初我的 Object 为 null 并且它是通过 Promise 填充的.

这是我的组件文件

从@angular/core"导入 {Component, NgModule, OnInit}从@angular/platform-b​​rowser"导入 {BrowserModule}类 MyData {xyz : 我的子数据；}类 MySubData {名称:字符串；}@成分({选择器:'我的应用'，模板:`<div><h2>你好{{name}}</h2>{{abc.xyz.name}}

`，})导出类 App 实现 OnInit {abc : MyData = null;构造函数(){this.name = 'Angular2'}ngOnInit() {setTimeout(() => {this.abc = new MyData();this.abc.xyz = new MySubData();this.abc.xyz.name = "Binita";}, 2000);}}@NgModule({进口:[浏览器模块]，声明:[应用程序]，引导程序:[应用程序]})导出类 AppModule {}

当我从模板中删除 {{abc.xyz.name}} 行时，它运行良好.

我在代码中使用了设置超时，因为我从 Promise 获取数据(即异步调用).

我最初可以理解为abc 是null，我的代码无法找到abc.xyz.name.但我不想放置任何 if 条件来检查.因为我在 JSON 中有多个属性，并且不可能每个属性都写 if 条件.

在 angularjs 1 的早期，如果 abc 为空，那么它会自动用空字符串替换它.我想在 angular2 中做同样的事情.请提出建议.

下面是plunker

https://plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview

解决方案

那是因为 abc 在模板渲染时未定义.您可以使用安全导航操作符 (?) 来保护"模板，直到 HTTP 调用完成:

{{abc?.xyz?.name}}

您可以在此处阅读有关安全导航操作符的更多信息.>

更新:

不能在数组中使用安全导航操作符，你必须利用 NgIf 指令来解决这个问题:

<div *ngIf="arr && arr.length > 0">{{arr[0].name}}

在此处阅读有关NgIf指令的更多信息.

I have attached the plunker of my angular2 code piece. I want to print a field from my JSON but unable to print that as initially my Object is null and it is being populated via a Promise.

This is my component file

import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

class MyData {
  xyz : MySubData;
}

class MySubData {
  name : string;
} 
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      {{abc.xyz.name}}
    </div>
  `,
})
export class App implements OnInit {
  abc : MyData = null;
  constructor() {
    this.name = 'Angular2'
  }

  ngOnInit() {
    setTimeout(() => {
      this.abc = new MyData();
      this.abc.xyz = new MySubData();
      this.abc.xyz.name = "Binita";
    }, 2000);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

When I am removing the line {{abc.xyz.name}} from my template it is running fine.

I have use set time out in my code because I am getting my data from Promise (i.e asynchronous call).

I can understand initially as abc is null, my code is unable to find abc.xyz.name. But I don't want to put any if condition to check. Because I have several property inside a JSON and it is not possible for each property to write if condition.

Earlier in angularjs 1 if abc is null then it would automatically replace it with blank string. I want to do the same thing in angular2. Please suggest.

Below is the plunker

https://plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview

解决方案

That's because abc is undefined at the moment of the template rendering. You can use safe navigation operator (?) to "protect" template until HTTP call is completed:

{{abc?.xyz?.name}}

You can read more about safe navigation operator here.

Update:

Safe navigation operator can't be used in arrays, you will have to take advantage of NgIf directive to overcome this problem:

<div *ngIf="arr && arr.length > 0">
    {{arr[0].name}}
</div>

Read more about NgIf directive here.

这篇关于angular2:错误:TypeError:无法读取未定义的属性“..."的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！