ion-select / ion-label не отображается должным образом с атрибутом, плавающим в Ionic 4

Question

При использовании динамических значений для выбора ионного выбора метка ионного выбора отображается некорректно, и значение, и метка отображаются друг над другом, см. Следующий рисунок.

Нажмите здесь, чтобы увидеть скриншот проблемы

Пример кода доступен здесь на github: Ionic 4 Ion-Select пример

Вотвыдержка из кода о том, как используется ion-select и не работает:

      <ion-list>
        <ion-item>
          <ion-label position="floating">Event Game</ion-label>
          <ion-select [(ngModel)]="tstObj.key" (ionChange)="onChangeVal()">
            <ion-select-option *ngFor="let game of gameLst" [value]="game.key">{{game.value}}</ion-select-option>
          </ion-select>
        </ion-item>
        <ion-item>
        </ion-item>
      </ion-list>

Данные для ion-select-selection извлекаются следующим образом:

this.http.get('./assets/data.json').subscribe( (settings: any) => {
  this.gameLst = settings.gameLst;
});

Любое предположение, что я делаюнеправильно иметь эту проблему?

Вот вывод ионной информации:

Ionic:

   Ionic CLI                     : 5.4.6 (/Users/x/.nvm/versions/node/v10.16.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.3
   @angular-devkit/build-angular : 0.802.2
   @angular-devkit/schematics    : 8.3.17
   @angular/cli                  : 8.3.17
   @ionic/angular-toolkit        : 2.1.1

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : 0.2.7 (update available: 0.2.9)

System:

   NodeJS : v10.16.0 (/Users/x/.nvm/versions/node/v10.16.0/bin/node)
   npm    : 6.13.0
   OS     : macOS Mojave
   Xcode  : Xcode 11.2.1 Build version 11B500

Answer 1

Измените

 <ion-select [(ngModel)]="tstObj.key" (ionChange)="onChangeVal()">
            <ion-select-option *ngFor="let game of gameLst" [value]="game.key">{{game.value}}</ion-select-option>
          </ion-select>

на

 <ion-select [(ngModel)]="game" (ionChange)="onChangeVal()">
            <ion-select-option *ngFor="let game of gameLst" [value]="game.key">{{game.value}}</ion-select-option>
          </ion-select>

и в своей игре добавьте выбранный ключ, подобный этому

добавьте эту строку

 for(let i=0;i<this.gameLst2.length;i++){
     this.gameLst2[i].selected = "false"
}

теперь для целей тестирования давайте сделаем selected = "true" для любого объекта

 this.gameLst2[2].selected = "true"
    console.log(this.gameLst2)

теперь мы можем динамически выбирать вот так

<ion-item>
            <ion-label position="floating">Event Game</ion-label>
            <ion-select [(ngModel)]="game" (ionChange)="onValChange()">
                <ion-select-option *ngFor="let game of gameLst2" [selected]="game.selected" [value]="game.key">{{game.value}}</ion-select-option>
            </ion-select>
        </ion-item>