angle2のレンダリング編集フォーム。サービスからのデータをどのように待つことができますか？

Question

サービスからのデータで編集用のフォームをレンダリングしようとしましたが、サービスからデータを取得する前にinitForm()メソッドが呼び出すため、エラーが発生しました。どうすれば修正できますか？

マイコンポーネント

import { Component, OnInit } from '@angular/core'; 
import { Subscription } from 'rxjs/Rx'; 
import { ActivatedRoute, Router } from '@angular/router' 

import { 
    FormArray, 
    FormControl, 
    Validators, 
    FormGroup, 
    FormBuilder 
} from '@angular/forms'; 

import { Company } from './../company'; 
import { CompanyService } from './../company.service'; 


@Component({ 
    selector: 'app-company-edit', 
    templateUrl: './company-edit.component.html' 
}) 


export class CompanyEditComponent implements OnInit { 
    companyForm: FormGroup; 
    private isNew = true; 
    private company: Company; 
    private companyId: number; 
    private subscription: Subscription; 

    constructor(private route: ActivatedRoute, 
       private companyService: CompanyService, 
       private formBuilder: FormBuilder) { } 



    ngOnInit() { 
    this.subscription = this.route.params.subscribe(
     (params: any) => { 
     if (params.hasOwnProperty('id')) { 
      this.isNew = false; 
      this.companyId = +params['id']; 
      this.companyService.getCompany(this.companyId).subscribe((data) => { 
      this.company = data; 
      console.log('end sub'); 
      }) 

     } else { 
      this.isNew = true 
      this.company = null; 
     } 
     this.initForm(); 
     } 
    ) 
    } 

    onSubmit(){ 

    } 

    ngOnDestroy() { 
    if (this.subscription) { 
     this.subscription.unsubscribe(); 
    } 
    } 


    private initForm(){ 
    let companyName = ""; 

    if (!this.isNew){ 
     console.log('start init'); 
     companyName = this.company.name; 
    } 

    this.companyForm = this.formBuilder.group({ 
     name: [companyName, Validators.required] 
    }) 
    } 

} 

マイサービス

import { Injectable } from '@angular/core'; 
import { Angular2TokenService } from 'angular2-token'; 
import { Company } from './company'; 
import { Observable } from 'rxjs/Rx'; 
import { Headers, Http, Response } from '@angular/http'; 

import "rxjs/Rx" 

@Injectable() 
export class CompanyService { 
    private company: Company; 
    private companies: Company[] = []; 

    constructor(private tokenService: Angular2TokenService) { } 

    getCompanies(){ 
    return this.tokenService.get('companies').map((response: Response) => response.json()) 
    } 


    getOwnCompanies(){ 
    return this.tokenService.get('companies/own').map((response: Response) => response.json()) 
    } 

    getCompany(companyId: number){ 
    return this.tokenService.get('companies/' + companyId).map((response: Response) => response.json()) 
    } 

} 

、そこにある私のフォーム

<div class="row"> 
    <div class="col-xs-12"> 
    <form [formGroup]="companyForm" (ngSubmit)="onSubmit()"> 
     <div class="row"> 
     <div class="col-xs-12"> 
      <button type="submit" class="btn btn-success" [disabled]="!companyForm.valid">Save</button> 
      <a class="btn btn-danger" (click)="onCancel()">Cancel</a> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-xs-12"> 
      <div class="form-group"> 
      <label for="name">Name</label> 
      <input 
       type="text" 
       id="name" 
       class="form-control" 
       formControlName="name"> 
      </div> 
     </div> 
     </div> 
    </form> 
    </div> 
</div> 

私はエラーを得た

EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property "name" of undefined 

TypeError: Cannot read property "name" of undefined at CompanyEditComponent.initForm

私はサービスからデータを待つ方法を知りません。私はInitFormとngOnOnitにconsole.logを追加しました。そして、私はあなたのデータを取得した後だけinitForm()を呼び出すend sub

Answer 1

前start initを参照してください。

ngOnInit() { 
    this.subscription = this.route.params.subscribe(
     (params: any) => { 
     if (params.hasOwnProperty('id')) { 
      this.isNew = false; 
      this.companyId = +params['id']; 
      this.companyService.getCompany(this.companyId).subscribe((data) => { 
      this.company = data; 
      this.initForm(); // moved it here 
      console.log('end sub'); 
      }) 
     } else { 
      this.isNew = true 
      this.company = null; 
     } 
     } 
    )} 

編集：

また、前のレンダリングからフォームを防ぐために、フォーム上のNgIfディレクティブを使用する必要がありますinitForm()と呼びます：

<form *ngIf="companyForm" [formGroup]="companyForm" (ngSubmit)="onSubmit()">