Angular 2 Set Daten von REST API mit PatchValue

Question

Ich habe ein Formular und ein paar Funktionen, die wie folgt aussehen.

ngOnInit() { 
     this.buildForm(); 
     this.loadData(); 
     this.success = false; 
    } 

    loadData(): void { 
     this.countryService.getCountries().subscribe(list => { 
      this.countries = new Select2Mapper('countryCode', 'name').getData(list); 
      this.setDefaultCountry(); 
     }); 
    } 

    setDefaultCountry(): void { 
     console.log('Setting default country'); 
     console.log(this.accountCreateForm.get('company').value); 
     this.accountCreateForm.get('company').patchValue({ 
      countryCode: "US" 
     }); 
    } 

    buildForm(): void { 

     this.accountCreateForm = this.fb.group({ 
      company: this.fb.group({ 
       companyName: ['', [WPValidator.companyName]], 
       countryCode: ['', [Validators.required]] 
      }), 
      administrative: this.fb.group({ 
       firstName: ['', [WPValidator.nameMandatory]] 
      }) 
     }); 

     console.log('Form built'); 

     this.accountCreateForm.valueChanges 
      .subscribe(data => this.onValueChanged(data)); 

     this.onValueChanged(); // (re)set validation messages now 

    } 

In dem obigen Beispiel kann ich setDefaultCountry setDefaultTimeZone sehen nach buildForm genannt zu werden. Ich kann nicht verstehen, warum sich die neuen Werte in der Benutzeroberfläche widerspiegeln. Alles, was ich in der Benutzeroberfläche sehe, ist die vollständige Liste der Werte. Es zeigt nicht den Patch-Wert. Muss ich irgendwelche Ereignisse vor oder nach dem Festlegen des Standardwerts auslösen?

Auch wenn ich den Formularwert nach dem Setzen von Standard, d. H. PatchValue, drucken, kann ich den aktualisierten Wert sehen.

Wenn es darauf ankommt, ich bin mit einem Winkel Wrapper auf select2 jQuery-Plugin für Land Dropdown

Answer 1

Sie müssen changeDetectionRef importieren und rufen detectChanges().

import {ChangeDetectorRef} from '@angular/core'; 

Dann in Ihrer Klasse,

constructor(private _cdr : ChangeDetectorRef){ 

} 

später nennen _cdr.detectChanges() nach patchValue()