Açısal 2 ayarı ajax yanıtından sonra kontrol değerleri

Question

Merhaba, bir seçim kutusu oluşturduğumda ve bir ajax çağrısından sonra bir değer atama girişiminde bulunduğumda bazı sorunlara rastladım gibi görünüyor.

export class StoreRegistrationComponent implements OnInit { 
    public countries: Array<StoreViewModel.CountryViewModel>; 
    public hasFormBeenSubmitted: boolean;    
    public storeRegistrationForm: ControlGroup; 

    public ngOnInit() { 
      this.storeDataService.getCountries().subscribe(countries => { 
       this.countries = countries 
       this.storeRegistrationForm.value.userCountryId = this.countries[0].id; 
       this.storeRegistrationForm.value.storeCountryId = this.countries[0].id; 
      }); 
      this.buildStoreRegistrationForm();  
    } 

    private buildStoreRegistrationForm() { 
     this.storeRegistrationForm = this.formBuilder.group({ 
      userCountryId: new Control('', Validators.compose([])), 
      storeCountryId: new Control('', Validators.compose([])), 
     }); 
    } 

} Artık sunucudan istek varsayılan olarak ayarlamak için countrues ile geldiğinde burada başarmak olduğunu istediğinizi

 <form novalidate (ngSubmit)="registerStore()" [ngFormModel]="storeRegistrationForm"> 
      <div class="col-xs-12 col-sm-6"> 
       <div class="form-group"> 
        <label>{{text.label.country}}</label> 
        <select class="form-control" ngControl="userCountryId"> 
         <option *ngFor="#country of countries" [value]="country.id">{{country.name}}</option> 
        </select> 
       </div> 
      </div> 
      <div class="col-xs-12 col-sm-6"> 
       <div class="form-group"> 
        <label>{{text.label.storeCountry}}</label> 
        <select class="form-control" ngControl="storeCountryId"> 
         <option *ngFor="#country of countries" [value]="country.id">{{country.name}}</option> 
        </select> 
       </div> 
      </div> 
      <div class="col-xs-12 text-right"> 
       <button type="submit" class="btn btn-primary"> 
        <span>{{text.label.finish}}</span> 
       </button> 
      </div> 
     </form> 

: Burada

formunu oluşturur kod si dizideki ilk öğeye göre seçim kutusu için değer.

Neyi yanlış yapıyorum? countries değerler gelene kadar

Answer 1

Sen yaratılması için gecikme subscribe() callback'inde içine this.buildStoreRegistrationForm(); çağrısını taşıyabilirsiniz ya:

public ngOnInit() { 
    this.storeDataService.getCountries().subscribe(countries => { 
    this.countries = countries 
    this.storeRegistrationForm.value.userCountryId = this.countries[0].id; 
    this.storeRegistrationForm.value.storeCountryId = this.countries[0].id; 
    this.buildStoreRegistrationForm();  
    }); 
} 

veya kullandığınız değerleri güncelleyebilirsiniz

public ngOnInit() { 
    this.storeDataService.getCountries().subscribe(countries => { 
    this.countries = countries; 
    this.storeRegistrationForm.controls['userCountryId'].updateValue(this.countries[0].id); 
    this.storeRegistrationForm.controls['storeCountryId'].updateValue(this.countries[0].id); 
    }); 
}