设置 ion-select 文本

Question

当ion-select框打开时，我需要标签文本不同。不知何故，我似乎找不到我能想出的可行解决方案。下面的图片是我的目标（通过更改浏览器ATM中的元素来实现。）另外，不知道如何更改这些图片的大小。对不起。

<ion-item>
  <ion-label>Water Source</ion-label>
    <ion-select formControlName="waterSource" multiple="true">
    <ion-select-option name="Aquifer">Aquifer</ion-select-option>
    <ion-select-option name="CityWater">City Water</ion-select-option>
    <ion-select-option name="Lake">Lake</ion-select-option>
    <ion-select-option name="Pond">Pond</ion-select-option>
    <ion-select-option name="River">River</ion-select-option>
    <ion-select-option name="RuralWater">Rural Water</ion-select-option>
    <ion-select-option name="Well">Well</ion-select-option>
    <ion-select-option name="Other">Other</ion-select-option>
  </ion-select>
  <ion-input *ngIf="!customers.surveyCompleteDate" formControlName="waterSource" type="string"></ion-input>
  <ion-input *ngIf="customers.surveyCompleteDate" formControlName="waterSource" readonly></ion-input>
</ion-item>

Answer 1

如 the docs 中所述，您可以使用 interfaceOptions 属性为警报设置不同的标题（除其他外).

请看this stackblitz demo.

组件

// ...
public customOptions: any = {
  header: "Pick all that apply"
};
// ...

模板

<ion-item>
  <ion-label>Water Source</ion-label>
  <ion-select [interfaceOptions]="customOptions" multiple="true">
    <ion-select-option name="Aquifer">Aquifer</ion-select-option>
    <ion-select-option name="CityWater">City Water</ion-select-option>
    <ion-select-option name="Lake">Lake</ion-select-option>
    <ion-select-option name="Pond">Pond</ion-select-option>
    <ion-select-option name="River">River</ion-select-option>
    <ion-select-option name="RuralWater">Rural Water</ion-select-option>
    <ion-select-option name="Well">Well</ion-select-option>
    <ion-select-option name="Other">Other</ion-select-option>
  </ion-select>
</ion-item>

另请记住，您可以设置 subHeader 甚至 message 以防您希望“水源”成为警报的主要标题，并显示“Select all that apply" 作为子 header 或消息，因为这听起来像是对用户的提示，而不是警报的主要标题。

设置 ion-select 文本

Set ion-select text

ionic4

组件

模板