我已经附上了我的angular2代码片段的plunker.我想从我的JSON打印一个字段,但无法打印,因为最初我的对象为空,并且它是通过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(即异步调用)获取数据.

我一开始能理解,因为abcnull,我的代码找不到abc.xyz.名称但我不想判断任何if条件.因为我在JSON中有几个属性,每个属性都不可能写入if条件.

在angularjs 1的前面部分,如果abc为空,那么它将自动用空字符串替换它.我想在angular2做同样的事情.请建议.

下面是plunker

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

推荐答案

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

{{abc?.xyz?.name}}

您可以阅读有关安全导航操作员here的更多信息.

更新:

安全导航运算符不能用于数组,您必须利用NgIf指令来克服此问题:

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

阅读更多关于NgIf指令here的信息.

Angular相关问答推荐

tabindex on button on button in MatMenu in angular不工作

尾风手风琴中的Ngor

命令不起作用的初始菜单项

独立组件;依赖项注入

当嵌套在异步容器中时,S会阻止具有动态值的ionic 段工作吗?

筛选器不会从文本输入触发更改事件

元素上的Angular 管道链接不起作用

nx serve正在忽略@angular/localize/init的导入"

Angular 显示来自文字数组的SVG路径

崩溃Angular项目Docker容器

Angular 16:信号更新未能更新视图

根据变量值更改按钮样式

异步管道模板中的局部变量(Angular 2+)

绑定 Angular material Select 列表

在Angular 4中有条件地应用点击事件

Angular 没有可用于依赖类型的模块工厂:ContextElementDependency

如何在 Angular CLI 1.1.1 版中将路由模块添加到现有模块?

什么是 Angular 4,我可以从哪里了解更多信息?

BrowserAnimationsModule 和 NoopAnimationsModule 有什么区别?

Angular2动态改变CSS属性