angular2: Error: TypeError: Cannot read property '...' of undefined
angular2: Error: TypeError: Cannot read property '...' of undefined
我附上了我的 angular2 代码片段的插件。我想从我的 JSON 中打印一个字段,但无法打印它,因为最初我的对象为 null 并且它是通过 Promise 填充的。
这是我的组件文件
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 {}
当我从我的模板中删除行 {{abc.xyz.name}}
时,运行 没问题。
我在我的代码中使用了设置超时,因为我从 Promise 获取数据(即异步调用)。
我最初可以理解为 abc
是 null
,我的代码无法找到 abc.xyz.name。但我不想放置任何 if 条件来检查。因为我在一个JSON里面有几个属性,不可能每个属性都写if条件。[=15=]
在 angularjs 1 之前,如果 abc 为 null,则它会自动将其替换为空白字符串。我想在 angular2 中做同样的事情。请提出建议。
下面是plunker
那是因为abc
在模板渲染的时候是未定义的。您可以使用安全导航运算符 (?
) 到 "protect" 模板,直到 HTTP 调用完成:
{{abc?.xyz?.name}}
您可以阅读有关安全导航运算符的更多信息here。
更新:
不能在数组中使用安全导航运算符,您将不得不利用 NgIf
指令来解决这个问题:
<div *ngIf="arr && arr.length > 0">
{{arr[0].name}}
</div>
详细了解 NgIf
指令 here。
Angular 模板支持安全导航运算符或存在运算符或空传播运算符。假设你有组件 class
myObj:any = {
doSomething: function () { console.log('doing something'); return 'doing something'; },
};
myArray:any;
constructor() { }
ngOnInit() {
this.myArray = [this.myObj];
}
您可以在模板 html 文件中使用它,如下所示:
<div>test-1: {{ myObj?.doSomething()}}</div>
<div>test-2: {{ myArray[0].doSomething()}}</div>
<div>test-3: {{ myArray[2]?.doSomething()}}</div>
我附上了我的 angular2 代码片段的插件。我想从我的 JSON 中打印一个字段,但无法打印它,因为最初我的对象为 null 并且它是通过 Promise 填充的。
这是我的组件文件
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 {}
当我从我的模板中删除行 {{abc.xyz.name}}
时,运行 没问题。
我在我的代码中使用了设置超时,因为我从 Promise 获取数据(即异步调用)。
我最初可以理解为 abc
是 null
,我的代码无法找到 abc.xyz.name。但我不想放置任何 if 条件来检查。因为我在一个JSON里面有几个属性,不可能每个属性都写if条件。[=15=]
在 angularjs 1 之前,如果 abc 为 null,则它会自动将其替换为空白字符串。我想在 angular2 中做同样的事情。请提出建议。
下面是plunker
那是因为abc
在模板渲染的时候是未定义的。您可以使用安全导航运算符 (?
) 到 "protect" 模板,直到 HTTP 调用完成:
{{abc?.xyz?.name}}
您可以阅读有关安全导航运算符的更多信息here。
更新:
不能在数组中使用安全导航运算符,您将不得不利用 NgIf
指令来解决这个问题:
<div *ngIf="arr && arr.length > 0">
{{arr[0].name}}
</div>
详细了解 NgIf
指令 here。
Angular 模板支持安全导航运算符或存在运算符或空传播运算符。假设你有组件 class
myObj:any = {
doSomething: function () { console.log('doing something'); return 'doing something'; },
};
myArray:any;
constructor() { }
ngOnInit() {
this.myArray = [this.myObj];
}
您可以在模板 html 文件中使用它,如下所示:
<div>test-1: {{ myObj?.doSomething()}}</div>
<div>test-2: {{ myArray[0].doSomething()}}</div>
<div>test-3: {{ myArray[2]?.doSomething()}}</div>