Zugriff auf Angular 2-Eigenschaften innerhalb des Controllers nicht möglich

Question

Ich bin neu in Angular und habe Probleme beim Binden von Daten von einem Datendienst an FormGroup. Ich bin in der Lage, auf die Eigenschaften in der Ansicht zugreifen, aber gut, aber die gleichen Eigenschaften sind undefined innerhalb der Controller, wo ich versuche, die Formulargruppe zu erstellen und die ersten Formularsteuerwerte festlegen.

Modell

export class Dog { 
    constructor(
    id: number, 
    name: string, 
    age: number 
) { } 
} 

Dienst

getDog(): Promise<Dog> { 
    return this.http.get(this.baseUrl + '/api/endpoint').toPromise().then(res.json()); 
} 

Component ich dann wie diesen Dienst aus meiner Komponente nennen:

export class DogComponent implements OnInit { 
    form: FormGroup; 
    dog: Dog; 

    constructor(private service: DogService, private fb: FormBuilder) { } 

    ngOnInit(): void { 
    this.getData(); 
    this.createForm(); 
    } 

    getData() { 
    this.service.getDog().then(res => this.dog = res); 
    } 

    createForm() { 
    this.form = this.fb.group({ 
     id: [this.dog.id], 
     name: [this.dog.name], 
     age: [this.dog.age] 
    }); 
    } 
} 

Ansicht

<form [formGroup]="form"> 
    <input formControlName="name" /> 
    <input formControlName="age" /> 
</form> 

Ich kann den Eingangswert wie [Wert] = „name“ setzen, aber ich möchte in der Lage sein, die in dem Create Verfahren einzustellen. Irgendwelche Ideen, warum die Eigenschaften für die Ansicht, aber nicht innerhalb des Controllers verfügbar sind

Answer 1

Http Anrufe asynchron sind in der Natur .So Sie für die Daten warten, bevor Sie verwenden, dass data.So Aufruf von Createform() -Methode innerhalb getDog() then.I ändern würde. wie Ihr Code

export class DogComponent implements OnInit { 
form: FormGroup; 
dog: Dog; 

constructor(private service: DogService, private fb: FormBuilder) {} 

ngOnInit(): void { 

    this.form = this.fb.group({ 
     id: [""], 
     name: [""], 
     age: [""] 
    }); 
    this.getData(); 

} 

getData() { 
    this.service.getDog().then(res => { 
     this.dog = res; 
     this.createForm(); 
    }); 
} 

createForm() { 
    this.form.setValue({ 
     id: this.dog.id, 
     name: this.dog.name, 
     age: this.dog.age 
    }); 

} 
} 

-Code folgt nicht getestet ... Hoffe das hilft dem Konzept

Answer 2

Sie sind null, weil das Versprechen, die Daten zu erhalten, noch nicht abgeschlossen ist. Tun Sie dies in Ihrem getData:

getData() { 
    this.service.getDog().then(res => { 
     this.dog = res; 
     this.createForm(); 
    }); 
    }