javascript - 如何计算 Angular 2中填充的文本框

Question

我有六个文本框，我想计算填充框的数量

<input type="text" #tb1 placeholder="Weight" class="form-control"(ngModelChange)="counterfunc(tb2)" />
<input type="text" #tb2 placeholder="Weight" class="form-control"(ngModelChange)="counterfunc(tb2)" />
<input type="text" #tb3 placeholder="Weight" class="form-control"(ngModelChange)="counterfunc(tb3)" />
<input type="text" #tb4 placeholder="Weight" class="form-control"(ngModelChange)="counterfunc(tb4)" />
<input type="text" #tb5 placeholder="Weight" class="form-control"(ngModelChange)="counterfunc(tb5)" />
<input type="text" #tb6 placeholder="Weight" class="form-control"(ngModelChange)="counterfunc(tb6)" />

{{counter}}

counter: number = 0;

counterfunc(tb){
    // need help here
    if (tb.value != '') {
        this.counter++;
    }
}

我发现了这个骗子plunkr但这是针对复选框的。如何计算填充的文本框的数量？如果用户清空盒子，则计数应减一。谢谢

Answer 1

我不认为为一个组件(好吧，输入)声明几个在任何情况下行为都完全相同的变量有什么意义。您应该声明一个输入列表，而不是为每个输入声明一个变量。

为此使用子装饰器

<ng-container *ngFor="let i of [0, 1, 2, 3, 4, 5]">  
  <input type="text" #textboxes placeholder="Weight" class="form-control" (input)="input()"/>
</ng-container>

<p>{{filledCount}}</p>

在你的 TS 中

filledCount: number = 0;
@ViewChildren('textboxes') textboxes: QueryList<ElementRef>;
input() { this.filledCount = this.textboxes.filter(t => t.nativeElement.value).length; }

这是一个 working stackblitz 。