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>

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

1 个答案: