Ionic 3 中的复选框问题

Question

有一个带有复选框的离子模板。条件是一旦值被选中，该值应该传递到 user_filter 数组（user_filter 数组已经声明并且运行良好）。当我点击 select 框时，console1 值显示但 console 2 不显示，这意味着数据未输入数组中。有人知道原因吗！ …

Html 文件

<ion-item>
                    <ion-label>Non A/C</ion-label>
                    <ion-checkbox (click)="choose_type('type','Non A/C',$event)"></ion-checkbox>

                </ion-item>

TS 文件

choose_type(type: string, value: any, event: { target: { checked: boolean; }; }) {

 console.log('Inside choose type function'); //console1
    let index;
     console.log('Boolean value',event.target.checked);
    if (event.target.checked === true) {
 console.log('Inside ture value'); //console2
       console.log('Value checked true');
        this.user_filter[type].push(value);

    }
     else
      {
        index = this.user_filter[type].indexOf(value);
        this.user_filter[type].splice(index, 1);
    }
    console.log('User filter array',this.user_filter);
}

Answer 1

您无需使用 ion-checkbox 的更改或单击事件，而是使用为 ionic 复选框提供的 ionChange 事件，然后只有您将获得选定的值。

您可以从$event.value中获取选定的值。 click 事件有效，但您不会获得在复选框中选择的值。当您使用单击事件时，您会得到 undefined，这就是不打印控制台的原因。

HTML

<ion-item>
    <ion-label>Non A/C</ion-label>
    <ion-checkbox (ionChange)="choose_type('type','Non A/C',$event.value)"></ion-checkbox>
</ion-item>

TS

choose_type(type: string, value: any, selectedValue) {
console.log(selectedValue); // Will be true or false
// Add your code here
}

参考离子文档ion-checkbox

Answer 2

谢谢大家的回答。最后我修好了，让我 post 编辑后的代码以供将来参考。

Home.Html

 <ion-item>
                        <ion-label>Non A/C</ion-label>
                        <ion-checkbox (ionChange)="choose_type('type','Non A/C',$event)"></ion-checkbox>

                    </ion-item>

Home.ts

choose_type(type: string, value: any, event: any) {
    let index;

    if (event.checked === true) {
       console.log('Pushed into array');
        this.user_filter[type].push(value);
       }
 else
      {

        index = this.user_filter[type].indexOf(value);
        this.user_filter[type].splice(index, 1);
    }
    console.log('User filter array',this.user_filter);
}

提示：使用 (event.checked) 而不是 (event.target.checked) 来获取值。

Ionic 3 中的复选框问题

Checkbox issue in Ionic 3

ionic-framework

ionic3

angular

Html 文件

TS 文件

Home.Html

Home.ts