如何在离子选择中显示多个选定的值？

Question

我正在使用 Ionic 4 开发 PWA。同时使用 ion-select 来选择这样的多个值。

<div class="form-group">

  <ion-item>
    <ion-icon slot="start" name="briefcase"></ion-icon>
    <ion-label floating color="primary">Business Unit *</ion-label>
    <ion-select multiple="true" placeholder="Select Business" (ionChange)="onBuSelectChange($event)"
      formControlName="businessUnit" class="form-control"
      [ngClass]="{'is-valid' : submitted && f.businessUnit.errors}">
      <ion-select-option *ngFor="let unit of listBusinessUnit" [value]="unit.ID">
        {{unit.BusinessUnitDesc}}
      </ion-select-option>
    </ion-select>
    <h1 *ngIf="submitted && f.businessUnit.errors && f.businessUnit.errors.required" floating>*</h1>
  </ion-item>

</div>

我得到以下输出，用户只能看到离子选项的第一个选定值的文本。

我尝试用以下内容覆盖 css，但没有成功。

.select-text {
    -ms-flex: 1;
    flex: 1;
    min-width: 190px;
    font-size: inherit;
    text-overflow: ellipsis;
    white-space: pre-line;
    overflow: hidden;
  }

Answer 1

这已经很晚了，但我在我的项目中遇到了同样的问题，选定的选项不适合选择项。 我能够解决它的方法是创建一个额外的元素来显示结果（我使用弹出界面作为离子选择元素）。我知道这不是一个很好的解决方案，但它仍然有效并且看起来不错。也许其他人可以提出更好的方法，我更喜欢更清洁的解决方案，但目前这是我可以处理的唯一方法。 这是我基于您的示例的解决方案：

<div class="form-group">
  <ion-item>
    <ion-icon slot="start" name="briefcase"></ion-icon>
    <ion-label floating color="primary">Business Unit *</ion-label>

    // I render select hidden
    <ion-select multiple="true" placeholder="Select Business" formControlName="businessUnit" interface="popover" #select>
      <ion-select-option *ngFor="let unit of listBusinessUnit" [value]="unit.ID">
        {{unit.BusinessUnitDesc}}
      </ion-select-option>
    </ion-select>

    // And this is visualization part. I chose chips for values visualization as it looks nicer
    <ion-item lines="none" (click)="select.open()"> // <- here I use open() function to trigger open command of select
      <ion-icon slot="end" name="caret-down-outline" class="attributi__icon"></ion-icon>
      <ion-label color="tertiary" class="attributi__label">Business units</ion-label>
    </ion-item>

    <ng-container *ngFor="let unit of listBusinessUnit">
      // here I use formControlgetter to get the current value ofselect and show only the selected items
      <ion-chip *ngIf="businessUnit.value.includes(unit.id)" color="dark" outline="true">{{unit.BusinessUnitDesc}}</ion-chip>
    </ng-container>
  </ion-item>
</div>

这就是结果，但在我使用它的项目中。 （我没有足够的声誉来发布图片，所以这里是链接）

Here are the chips And here is select popup

Answer 2

在你的 CSS 上试试这个，这对我有用。

ion-select::part(text) {
    white-space: normal !important;
    word-wrap: break-word !important;
}

你可以参考这个：

https://ionicframework.com/docs/api/select#styling-select-element