取得したオブジェクトから特定のフィールド値を取得してコンポーネントのプロパティにバインドする方法TypeScript

Question

こんにちは、バックエンドサービスからオプションを入力するタイプのスクリプトコードがあります。

countryCode:"TUR" 
    countryId:185 
    countryName:"Turkey" 
    countryPhoneCode:"90" 
    __proto__:Object 

私のHTMLは、このようなものです：： 、そしてオブジェクトから特定のフィールド値を取得する方法の例について を取得したオブジェクトは、私はそれらの一つ一つが、このようなJSON形式であり、検索しました----- -

<div class="form-group "> 
       <label class="control-label" for="countryCode">Country</label> 
       <select class="form-control" id="countryCode"formControlName="countryCode"> 
        <option *ngFor="let country of countryList" 
     [attr.value]="country.countryCode" [selected]="country.countryCode === viewCountryCode"> 
         {{country.countryName}}</option> 
       </select> 
      </div> 

ここにあります私のタイプスクリプトのいくつかは：---

registrationForm: FormGroup; 
    username: AbstractControl; 
    useremail: AbstractControl; 
    commercialWebSiteLink: AbstractControl; 
    corporateWebSiteLink: AbstractControl; 
    countryCode: String = "jo"; 
    viewCountryCode: string = "jo"; 

createSignupForm() { 
    this.registrationForm = this.builder.group({ 
     username: ['', Validators.compose([ 
     Validators.required, 
     UserNameValidator.userNameRange, 
     UserNameValidator.OnlyAlphabets 
     ])], 
     useremail: ['', Validators.compose([ 
     Validators.required, 
     EmailValidator.mailFormat, 
     EmailValidator.domainCheckFormat, 
     EmailValidator.mailLength, 
     EmailValidator.specialCharacters 
     ])], 
     countryCode: [''], 
     commercialWebSiteLink: ['', Validators.compose([ 
     Validators.required, 
     UrlValidator.urlFormat, 
     ])], 

     corporateWebSiteLink: ['', Validators.compose([ 
     Validators.required, 
     UrlValidator.urlFormat, 
     ])], 
     merchantType: ['PSP'] 

    }); 
    this.username = this.registrationForm.controls['username']; 
    this.useremail = this.registrationForm.controls['useremail']; 
    this.commercialWebSiteLink = this.registrationForm.controls['commercialWebSiteLink']; 
    this.corporateWebSiteLink = this.registrationForm.controls['corporateWebSiteLink']; 
    this.regestrationErrorMessage = " "; 

    } 

submitsignup(RegistrationForm: any) { 

    if (!RegistrationForm.errors && RegistrationForm.valid) { 
     if ((<HTMLInputElement>document.getElementById("termsandConditons")).checked) { 
     this.isAcceptTerms = false; 
     } else { 
     this.isAcceptTerms = true; 
     } 
     this.homeService.signUpMarchent(RegistrationForm).subscribe(
     response => { 
      console.log(response); 
      if (response.success) { 
      this.signUpDone == true; 
      } else { 
      this.regestrationErrorMessage = this.translate.instant('MerchantRegistration.' + response.code); 
      if (this.regestrationErrorMessage == '') { 
       this.regestrationErrorMessage = this.translate.instant('MerchantRegistration.errGeneralError'); 
      } 
      } 
     }, 
     error => { 
      this.regestrationErrorMessage = this.translate.instant('MerchantRegistration.errGeneralError'); 
     } 


    ); 
    } 
    } 

今、私は、検索対象から国同上を取得するために私のタイプのスクリプトにしたい、と私は提出したときに型スクリプト変数に保存したいですフォーム、私は、代わりに国コード のバックエンドにそれを提出することができます任意の助けてくださいます、

Answer 1

これは私がタイプスクリプトで名前の新しいフォームコントロールを作った私は

 <div class="form-group "> 
      <label class="control-label" for="countryId">Country</label> 
      <select class="form-control" id="countryId" formControlName="countryId"> 
       <option *ngFor="let country of countryList" [attr.value]="country.countryId" [selected]="country.countryCode === viewCountryCode"> 
        {{country.countryName}}</option> 
      </select> 
     </div> 

それを解決する方法でありますクラス、国Id：createSignupForm（）の1。