我已附上我的angular2代码段的小栓。我想从JSON打印一个字段,但由于最初我的Object为null,并且无法通过Promise进行填充,因此无法打印。
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.
这是我的组件文件
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}} 在我的模板中运行正常。
When I am removing the line {{abc.xyz.name}} from my template it is running fine.
我已经使用了set在代码中超时,因为我正在从Promise中获取数据(即异步调用)。
I have use set time out in my code because I am getting my data from Promise (i.e asynchronous call).
最初我可以理解为 abc 为 null ,我的代码无法找到abc.xyz.name。但是我不想检查任何条件。因为我在JSON中有几个属性,所以如果条件满足,则不可能为每个属性写。
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.
angularjs 1的早期版本,如果abc为null,那么它将自动替换它与空白字符串。我想在angular2中做同样的事情。请提出建议。
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.
下面是the车手
plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview
推荐答案这是因为在模板渲染时未定义 abc 。您可以使用安全的导航运算符(?)来保护模板,直到HTTP调用完成:
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.
更新:
不能在数组中使用安全的导航运算符,您必须利用 NgIf 指令来克服此问题:
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>了解有关 NgIf 指令此处。
更多推荐
angular2:错误:TypeError:无法读取未定义的属性“ ...”
发布评论