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

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>

我得到以下输出，其中用户只能看到ion-options的第一个选定值的文本。

我尝试使用以下方法覆盖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

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

<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