我附上了我的angular2代码片的plunker。我想从我的JSON打印一个字段但是无法打印,因为最初我的Object是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}}
时它运行正常。
我在我的代码中使用set time out因为我从Promise获取数据(即异步调用)。
我最初可以理解为abc
是null
,我的代码无法找到abc.xyz.name。但我不想把任何if条件检查。因为我在JSON中有几个属性,并且如果条件,每个属性都不可能写入。
在angularjs 1中,如果abc为null,那么它将自动用空字符串替换它。我想在angular2中做同样的事情。请建议。
下面是plunker
Angular Template支持安全导航操作符或存在操作符或Null传播操作符。假设您有Component类
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>