时间戳

首页 > 解决方案 > Ionic 4 检查按钮显示多个选择值

angular - Ionic 4 检查按钮显示多个选择值

问题描述

我需要显示带有选择选项的列表，所以我使用检查按钮。但问题是我可以选择多个值，我需要在控制台中显示所有选定的值这是我的代码

<ion-list (ionChange)="checkValue($event)">
    <ion-item *ngFor="let usr of usersList"  >
      <ion-label>{{usr.username}}</ion-label>
      <ion-checkbox slot="start" value={{usr.userId}} ></ion-checkbox>
    </ion-item>
</ion-list>

.ts

 checkValue(event){
   console.log(event.detail.value);
 }

代码中的问题是它不能选择多个值，我需要在控制台中显示类似数组。

标签： angularionic-frameworkionic4

解决方案

您需要在后台维护一个数组，将所选项目添加到其中并从中删除取消选择的项目。这将用于添加项目：

selectedItems: any;

checkValues(event) {
    console.log(event.detail.value);
    if(!this.selectedItems) this.selectedItems = new Array();

    this.selectedItems.push(event.detail.value);
}

要在未选择时删除项目，请循环遍历 selectedItems 数组以查找匹配项（使用过滤器或 for 循环）并在找到时拼接出该值。

推荐阅读