Question

我只想在复选框打钩时触发事件，然后在取消选中该复选框时才删除事件。我该怎么做？目前我正在使用（更改）触发事件，但是如果我选中或取消选中此框，则会触发该事件。

 public send(line : any){
    this.broadCastService.sendLine(line);
  }

<div *ngFor="let line of test  ">
  <label>
    {{line.lineNumber}}
    <input type="checkbox" ng-model="line" (change)="send(line)">
  </label>

Answer 1

这种情况或条件必须放在ts文件下。您的代码中存在一些问题，例如不应以ng-model代替ngModel。看起来您具有AngularJS背景。无论如何，这里是解决方法

html

<div *ngFor="let line of test  ">
  <label>
    {{line.lineNumber}}
    <input type="checkbox" (change)="send($event)">
  </label>

ts

 public send(checked: any){
    if(checked){  //send if the value is true
        this.broadCastService.sendLine(line);
    }
  }

注意：复选框将仅包含true或false。您可能需要从其他地方获取line。

Answer 2

您可以这样做

Ts

export class Line {
  lineNumber:string;
  isActive:boolean;
}

public send(event, index : number) {
    // If value is true will execute the event
    if(test[index].isActive) {  
        this.broadCastService.sendLine(test[index]);
    }
}

// Assume we have the list as "test"
let test = new Array<Line>();

假设“测试”中的数据很少

HTML

<div *ngFor="let line of test;let i = index">
  <label>
    {{line.lineNumber}}
    <input type="checkbox" [(ngModel)]="line.isActive" (change)="send($event,i)">
  </label>
</div>

Answer 3

This link contains example of check and uncheck checkbox using change method

如何使用更改方法选中和取消选中复选框

3 个答案:

html

ts