计算没有事件的选中复选框（Angular）

Question

是否可以在不触发事件的情况下计算所选复选框？

我有一个动态的项目列表，并希望向用户显示所选的总数，直播。

<div *ngFor="let item of items; let i = index" class="form-check">
 <input type="checkbox" class="form-check-input" id="itemCheck{{i}}" name="item{{i}}"[(ngModel)]="item.checked" />
  <label class="form-check-label" for="itemCheck{{i}}">{{item.Name}}</label>
</div>

{{item.checked.length}}

我见过的答案都是以事件为基础的。

Answer 1

好吧，如果您希望Angular注意到输入类型状态的更改复选框，您可以使用事件或轮询更改，例如如果输入类型复选框的选择状态有任何变化，则每500ms检查一次，但不建议轮询。基于事件的模式是推荐的模式。你为什么不能使用活动？

Answer 2

如果由于某种原因您根本无法使用事件，则需要每隔一段时间自动更新您的信息：

public selectedCount = 0;
public ngOnInit() {
    interval(500) // time in ms
    .subscribe(() => this.setItemCount);
}

public setItemCount() {
    this.selectedCount = this.items.length;
}

这将每500ms更新一次计数。

您当然可以随时调用setItemCount - 例如当一个事件被解雇时。

Answer 3

如果任何值发生变化，生命周期就会运行ngDocheck，我们可以通过比较之前的值和新值来进行更改检测

在组件中

ngDoCheck(){
    let count = this.items.filter(i=>i.checked).length
    if(count != this.length){
      this.length=count
    }
  }

在HTML中

<input type='text' [(ngModel)]="name" name='name' />
{{name}}
<div *ngFor="let item of items; let i = index" class="form-check">
 <input type="checkbox" class="form-check-input" id="itemCheck{{i}}" name="item{{i}}"[(ngModel)]="item.checked" />
  <label class="form-check-label" for="itemCheck{{i}}">{{item.Name}}</label>
</div>

{{length}}

请参考这个stackblitz-link