Ionic 3中的复选框问题

Question

有一个带有复选框的离子模板。条件是，一旦选中该值，该值应传递到user_filter数组（user_filter数组已声明且运行良好）中。当我单击选择框时，会显示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

谢谢你们的回答。最终，我将其修复好，让我发布编辑后的代码以供将来参考。

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.target.checked）使用（event.checked）获取值。

Answer 2

您无需为ion-checkbox使用change或click事件，而是使用为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