Ion-select not rendering properly with dynamic value, Ionic-4

Ionic Framework
1

I am facing a problem while using ionic 4, and ionic-select. The problem comes when i have some data and i am binding the data. In this example, i already have a pre selected data, when i do so the ion-select does not render properly.

      <ion-item class="transparent">
        <ion-label position='floating'>{{ 'GENDER_TXT' | translate}}</ion-label>
        <ion-select interface="popover" color='medium' [(ngModel)]='Gender' formControlName='genderTxt'>
          <ion-select-option *ngFor='let g of Genders' [value]='g'>{{g.GENDER}}</ion-select-option>
        </ion-select>
      </ion-item>

      this.getGendersSub = this.proxy.Get_Genders(param).subscribe((data) => {
        this.Genders = data;
        this.Gender = this.Genders[0];
      });

I also tried the reactive forms point of view

this.form.get('genderTxt').setValue(this.Genders[0]);

but also it did not work for me

Untitled
Untitled.png384×695 10.1 KB

2

any solution ? for this q ?

3

remove your lable
lable is overlap on your default selected option
{{ ‘GENDER_TXT’ | translate}}