コントローラの角2のプロパティにアクセスできない

Question

私は新しく、データサービスからFormGroupにデータをバインドする際に問題があります。ビューのプロパティにアクセスできますが、フォームグループを作成して初期のフォームコントロール値を設定しようとするコントローラ内では、同じプロパティが未定義です。

モデル

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

サービス

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

コンポーネント 私はその後、私のようなコンポーネントからこのサービスを呼び出す：

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

ビュー

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

私は[値] =「名前」のような入力値を設定することですが、私はCreateFormの方法でそれらを設定することができるようにしたいです。プロパティがビューには使用可能で、コントローラ内には存在しない理由はありません。

Answer 1

のHttp呼び出しが）あなたはdata.SoはgetDog（内部はCreateForm（）メソッドを呼び出すことを使用する前にデータを待つ必要が.soの自然の中で非同期であるthen.Iが変化するであろう。 //：あなたのコードは次のようにコードがテストされていません

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

} 
} 

...ホープ、このコンセプト

[？私は非同期呼び出しからの応答を返すにはどうすればよい]の

Answer 2

データを取得するという約束がまだ完了していないため、これらはnullです。あなたのgetData内部でこれを行う：

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