ion-select-option не выбирает выбранную опцию, когда она указана

Question

В настоящее время я использую ionic 4, и я использую теги ion-select и ion-select-option на html-стороне.

После просмотра документации, когда я пытаюсь использовать selected = true в опции ion-select-option, по умолчанию эта опция не выбрана. Есть что-то, что я пропускаю или делаю неправильно?

Вот как мой код выглядит на стороне HTML. Я только связал ngModel на стороне ts и ничего больше

<ion-select class="ion-select" [(ngModel)]="dialCode">
       <ion-select-option value="+1" selected=true>+1</ion-select-option>
       <ion-select-option value="+852">+852</ion-select-option>
       <ion-select-option value="+86">+86</ion-select-option>
</ion-select>

Answer 1

Проблема в том, что вы связываете ion-select со свойством dialCode

... [(ngModel)]="dialCode" ...

Таким образом, вместо использования selected=true вам нужно инициализировать это свойство значением, которое вы хотите отобразить по умолчанию. Так что в вашем компоненте вы можете сделать что-то вроде этого, например:

// Angular
import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"]
})
export class HomePage implements OnInit {

  public dialCode: string = '+1'; // <--- Initialize the property

  constructor(...) {}

  // ...

}

А потом в представлении:

<ion-select class="ion-select" [(ngModel)]="dialCode">
  <ion-select-option value="+1">+1</ion-select-option>
  <ion-select-option value="+852">+852</ion-select-option>
  <ion-select-option value="+86">+86</ion-select-option>
</ion-select>