Angular 2 : passer un objet avec un objet imbriqué à un composant enfant

Question

J'ai des objets imbriqués

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

Je passe ces données au composant enfant via la propriété

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

Code du composant enfant :

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;
}

Ensuite, lorsque j'essaie d'accéder à la propriété de l'objet dans le modèle, j'obtiens une erreur ;

Answer 1

Essayez d'utiliser l'opérateur elvis dans votre HTML : data?.nestedData?.title .

Vous devez également modifier @Input data a @Input() data .

Answer 2

Vous ne pouvez pas accéder aux entrées dans le constructeur. Elles sont définies juste avant ngOnInit s'appelle :

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
  }
}