Übergabe von Daten in Angular2 an untergeordnete Komponente

Question

Hallo, ich habe ein kleines Problem mit der Übergabe von Daten von einer übergeordneten Komponente an einen untergeordneten Komponentencontroller.

Das ist der Markup-Code meiner Eltern Komponente parent.component.html

<element [mydata]="Value"></element> 

Damit ich mydata mit einem Wert gesetzt.

ich diesen Wert mit @Input in meinem Kind Controller

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'element', 
    templateUrl: './element.component.html', 
    styleUrls: ['./element.component.scss'], 
}) 

export class ElementComponent implements OnInit { 

    @Input() public mydata:string; 

    ngOnInit() { 
     console.log(this.mydata); 
    } 
} 

ich eine undefinierte in der Konsole, aber warum?

Answer 1

Sie können @Input Daten im Konstruktor nicht zugreifen (es noch nicht initialisiert ist), müssen Sie OnInit Schnittstelle implementieren:

import { OnInit } from "@angular/core"; 

export class My implements OnInit { 
    ... 

    ngOnInit() { 
     console.log(this.mydata); 
    } 

} 

Answer 2

Wahrscheinlich ein Asynchron-Problem, wie es scheint, Sie werden immer die Daten von json, was wahrscheinlich über http oder etwas abgerufen wird. Der undefinierte Fehler wird wahrscheinlich dadurch verursacht, dass die Ansicht gerendert wird, bevor die Daten tatsächlich abgerufen wurden, was zu einem nicht definierten Fehler führen würde.

Versuchen Sie, einen Zustand zu setzen, dass das Kind Komponente nicht wiedergegeben werden, bis es tatsächlich einen Wert hat:

<element *ngIf="value" [mydata]="value"></element> 

Und das aktuelle Setup halten, die Sie von anderer Antwort vorgeschlagen worden, das heißt:

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'element', 
    templateUrl: './element.component.html', 
    styleUrls: ['./element.component.scss'], 
}) 


export class ElementComponent implements OnInit { 

@Input() public mydata:string; 

    ngOnInit() { 
    console.log(this.mydata); 
    } 
} 

Hoffe, das hilft!