Question

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

在查看文档后，当我尝试在ion-select-option中使用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指定后不选择所选选项

1 个答案: