Angular 2+ Zugriff @ Input Data.Property mit [(ngModel)]

Question

Ich habe eine Komponente wie folgt deklariert, es empfängt ein Input-Daten. Ich verwende Primeng Kalenderkomponente, die Komponente, die es erstellt wird, aber ich bekomme keinen Zugriff auf die Daten, um es an die Vorlage zu übergeben Ich erhalte einen Fehler auf [(ngModel)] = "data.DateValue", es ist wie DataValue existiert nicht schon beim Zugriff

Was fehlt?

Wie wird ein Hilfs-Wert wie (myDateValue: Date) vom Typ Date gesetzt, nachdem die Eingangsdaten empfangen wurden?

Vielen Dank im Voraus.

import { Component, Input} from '@angular/core'; 
import { DataType } from "../model/dataType"; 

@Component({ 
    selector: 'exempleComponent', 
    template: '<p-calendar *ngIf="data" [(ngModel)]="data.DateValue" dateFormat="dd.mm.yy"></p-calendar>' 

}) 
export class ExempleComponent { 

    @Input() data: DataType; 

    constructor() { } 


} 

Geordnete Komponente:

import { Component, OnInit } from '@angular/core'; 
import { WebService } from './app.service'; 
import { MasterDataType } from "../model/masterDataType"; 

@Component({ 
    selector: 'my-app', 
    template: '<div> <exempleComponent [data]="theData.DataType" ><exempleComponent/> </div>', 
    providers: [WebService] 

}) 
export class AppComponent implements OnInit { 
    errorMessage: string; 
    theData: MasterDataType; 

    constructor(private dataService: WebService) {} 

    ngOnInit() { this.getDataFromService(); } 
    getDataFromService() { 
     this.dataService.getData() 
      .subscribe(
      myData => this.theData = myData, 
      error => this.errorMessage = <any>error); 
    }  
} 

Answer 1

Das Problem wird darauf hingewiesen, wie es ist. Die Variable data ist nicht definiert. Sie sollten mehr über Lifecycle Hooks lesen.

Obwohl Ihr Kind Komponente (ExempleComponent) bei ngAfterContentInit geladen wird, aber theData Variable wird noch in dieser Zeit nicht definiert, weil Ihr Service-Aufruf nicht abgeschlossen ist (oder gezeichnet).

Zum Beispiel:

data: SomeType; 
 
ngOnInit() { 
 
    console.log('START ngOnInit'); 
 
    this.service.getData().subscribe(_data => { 
 
    this.data = _data; 
 
    console.log('data', this.data); 
 
    }); 
 
    console.log('END ngOnInit'); 
 
}

Das Ergebnis des obigen Codes ist:

START ngOnInit

END ngOnInit

data Object

Die Lösung ist, müssen Sie die Daten binden, nachdem es geladen ist.

Lösung 1:

initialisieren theData.DataType. Gib ihm einen Standardwert.

Lösung 2:

[(ngModel)] = "Daten .DateValue". Überprüfen Sie, ob die Variable data verfügbar ist (nicht undefiniert oder null).

Lösung 3:

sollten Sie erwägen, ein Daten-Resolver verwenden, die Daten zu laden vor dem Laden Komponente hilft.

Lösung 4:

Kind Prevent Befüllungskomponente vor der Eingangsdaten geladen