Как сделать так, чтобы мой ion select выбирал и отображал код страны? - PullRequest
Новая
       71

Как сделать так, чтобы мой ion select выбирал и отображал код страны?

0 голосов
/ 21 октября 2019

The desired pages

Я пытаюсь добавить код страны, в котором при нажатии на селектор под меткой «страна» на втором изображении появляется список, подобныйпервое изображение с названиями стран и флагами рядом с ним, затем вы будете перенаправлены на второе изображение с селектором, отображающим выбранный флаг страны и код страны. Я пытался использовать 

                  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);
  }
...