复选框值未在复选框单击上选择

时间:2019-10-12 09:49:55

标签: angular

我绑定了复选框的值,但是当我单击复选框时,该值没有得到反映

<div *ngFor="let list of concessionsApplicable?.data; let i=index">
                                <label class="ml-0 mr-0 mt-1 c-checkbox-container" style="font-size: 16px">
                                    <label class="m-0" style="font-size: 14px">{{list?.name}}</label>
                                    <input 
                                           [(ngModel)]="list.isChecked"
                                           [ngModelOptions]="{standalone: true}" 
                                           name="isChecked"
                                           type="checkbox" 
                                           (click)="onApplyConcessions()" 
                                           value="true">
                                    <span class="checkmark"></span>
                                </label>
</div>


onApplyConcessions() {
        if (!!this.concessionsApplicable.data && !!this.concessionsApplicable.isConcessionApplied) {
            this.isNoConcessionReasonReq = false;
            const concessionResArr = [];
            for (let i = 0; i < this.concessionsApplicable.data.length; i++) {

                if (!!this.concessionsApplicable.data[i].isChecked && this.concessionsApplicable.data[i].isChecked === true) {
                    concessionResArr.push(this.concessionsApplicable.data[i].id);
                }
            }
            if (concessionResArr.length === 0) {
                this.alertService.showWarningAlert('At least Select 1 concession before proceeding forward');
                return false;
            }
            this.quoteConcessions = {
                'concessionApplied': 'yes',
                'concessions': concessionResArr
            };
        }
        this.applyConcession.emit(this.quoteConcessions);
    }

在“ concessionApplicable”数组中,我没有得到键“ isChecked”,因此在这种情况下,当我比较它的值时,显示未定义。

1 个答案:

答案 0 :(得分:0)

尝试使用change()事件

<div *ngFor="let list of concessionsApplicable?.data; let i=index">
    <label class="ml-0 mr-0 mt-1 c-checkbox-container" style="font-size: 16px">
        <label class="m-0" style="font-size: 14px">{{list?.name}}</label>
        <input [(ngModel)]="list.isChecked" [ngModelOptions]="{standalone: true}" name="isChecked" type="checkbox"
            (change)="onApplyConcessions()" value="true">
        <span class="checkmark"></span>
    </label>
</div>