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注意输入类型的状态变化复选框，则可以使用事件或轮询变化，例如尽管不建议轮询，但每500毫秒检查一次输入类型复选框的选择状态是否有任何变化。推荐使用基于事件的模式。为什么不能使用事件？

Answer 2

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

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

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

这将每500毫秒更新一次计数。

您当然可以在需要的任何时候调用setItemCount-例如当事件被触发时。

Answer 3

如果任何值发生更改，都会运行lifecyclehook 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

计算没有事件的选定复选框（角度）

3 个答案: