css - 如何在离子选择中显示多个选定的值?
问题描述
我正在使用 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;
}
解决方案
这已经很晚了,但我在我的项目中遇到了同样的问题,选定的选项不适合选择项。我能够解决它的方法是创建一个额外的元素来显示结果(我使用弹出界面作为离子选择元素)。我知道这不是一个很好的解决方案,但它仍然有效并且看起来不错。也许其他人可以提出更好的方法,我更喜欢更清洁的解决方案,但目前这是我可以处理的唯一方法。这是我基于您的示例的解决方案:
<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>
这就是结果,但在我使用它的项目中。(我没有足够的声誉来发布图片,所以这里是链接)
推荐阅读
- ios - 为什么类变量在swift中的struct中没有值
- python - Django Python如何计算给定两个时间字符串的时间差
- sql - 为什么 COALESCE 会执行两次子查询?
- react-native - 使用变换反应原生旋转图像标记
- assembly - 不使用加载字指令写入加载字
- postgresql - 连接到从 docker-compose yaml 生成的 postgres 数据库
- android - 推送通知在底部显示小矩形
- excel - 从单独的 Excel 工作表复制数据
- php - 当我需要很多文件时,PHP 只上传一个文件
- ios - 另一个标签下的 Swift 标签