ion-select-option 在指定时不选择 selected 选项

Question

我目前正在使用 ionic 4，我在 html 侧使用 ion-select 和 ion-select-option 标签。

当我尝试在 ion-select-选项中使用 selected=true 时查看文档后，它不会默认选择该选项。我有什么遗漏或做错了什么吗？

这是我的代码在 HTML 端的样子。我只在 ts 端绑定了 ngModel，没有别的

<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>

ion-select-option 在指定时不选择 selected 选项

ion-select-option not choosing selected option when it is specified

html

typescript

ionic-framework

angular

ionic4