Question

我有嵌套对象

data: {
  nestedData: {
    title: 'string'
  }
};

我通过属性

将此数据传递给子组件

<child-component [data]="data"></child-component>

子组件代码：

import {Component, Input} from 'angular2/core';

@Component({
  selector: 'cp-header',
  template: '<div>{{ data.nestedData.nestedData }}</div>',
  styleUrls: ['app/header/header.component.css']
})
export class ChildComponent {
  @Input() data;
}

然后当我尝试访问模板中的对象属性时出现错误;

Answer 1

尝试在HTML中使用elvis运算符：data?.nestedData?.title。

您还应将@Input data更改为@Input() data。

Answer 2

您无法在构造函数中访问输入。它们是在调用ngOnInit之前设置的：

export class ChildComponent {
  @Input data;

  constructor() {
    console.log(this.data); // here it prints `null`
  }

  ngOnInit() {
    console.log(this.data); // here it prints the actual value
  }
}

Angular 2：将具有嵌套对象的对象传递给子组件

2 个答案: