如何使我的离子选择并显示国家/地区代码？

Question

[我正在尝试添加国家/地区代码，当您在“国家/地区”标签下按下选择器时，在第二张图片中，您将获得类似于第一张图片的列表，其中包含国家/地区名称和旁边的标志，然后您会使用选择器显示所选国家标记和国家代码将其重定向到第二张照片。我尝试使用

                  Html                    
                 <ion-row>  
                <ion-col>
                    <ion-item (click)="openSelect()">
                  <div class="ion-text-left">

                      <ion-label position="stacked">البلد</ion-label>
                      <ion-input [(ngModel)]="selectedCode"></ion-input>
                    </div>
                  </ion-item>
                      <ion-item style="display: none">
                          <div class="ion-text-left">
                              <ion-label >البلد</ion-label>
                              <ion-select #select1 
            [(ngModel)]="selectedCode">
                                  <ion-select-option *ngFor="let c of countries" value="{{c.flag}}{{c.code}}">{{c.flag}}{{c.name}}</ion-select-option>
                                </ion-select>

                            </div>
          </ion-item>
          </ion-col>

.TS
@ViewChildren('select1') select1: Select;
 countries: any = [
    {
      code: '+91',
      flag: [./in.png],
      name: 'India'
    },
    {
      code: '+1',
      flag: [./US.png]
      name: 'America'
    }
  ];

 openSelect() {
    setTimeout(() => {
      this.select1.open();
    }, 150);
  }

Answer 1

用于选择国家/地区代码值，您可以使用ion select选项的[value]属性为了显示所选值，您可以使用ionic 4/5中离子选择的[selectedText]属性。

您可以找到官方文档here

 <ion-select formControlName="country" [selectedText]="signupform.controls.country.value"  name="country" #countryselect id="countryselect">
 <ion-select-option *ngFor="let country of countries" [value]="country.id">
     {{country.name}}
 </ion-select-option>
 </ion-select>