使用Angular / TypeScript轻松更改多个控件的值

Question

我有这张表：

当用户选中左上角的复选框时，它会根据上面另一个表单控件的值更改表中每个框的值。如果他们选择其他任何一个，则只会更改该行中的值。

所以，截至目前，我正在处理这些变化：

在我的ngOnInit：

中

this.form.controls['selectAll']
  .valueChanges
  .distinctUntilChanged()
  .subscribe(data => {
    this.selectAll();
  });`

和我的selectAll功能：

selectAll() {
    let depthValue = this.form.controls['depth'].value;

    if (this.form.controls['selectAll'].value === true) {
        this.form.controls['index44'].setValue(depthValue);
        this.form.controls['index4'].setValue(depthValue);
        this.form.controls['index5'].setValue(depthValue);
        this.form.controls['index6'].setValue(depthValue);
        this.form.controls['index7'].setValue(depthValue);
        this.form.controls['index8'].setValue(depthValue);
        this.form.controls['index9'].setValue(depthValue);
        this.form.controls['index10'].setValue(depthValue);
        this.form.controls['index13'].setValue(depthValue);
        this.form.controls['index14'].setValue(depthValue);
        this.form.controls['index15'].setValue(depthValue);
        this.form.controls['index16'].setValue(depthValue);
        this.form.controls['index17'].setValue(depthValue);
        this.form.controls['index18'].setValue(depthValue);
        this.form.controls['index19'].setValue(depthValue);
        this.form.controls['index20'].setValue(depthValue);
        this.form.controls['index21'].setValue(depthValue);
        //etc
    }

所以我的问题是：是否有一种更容易/更简洁的方法将值应用于所有这些盒子，所以我不需要专门的数百行代码来简单地更改为数字框的值？ / p>

Answer 1

只要您正确地逻辑构建数据，就可以完成。根据给定的信息，我们不知道数字之间的关系是什么。您向我们展示的代码设置索引4 - 10,13-21 ...为什么它跳过11和12？如果你有一些逻辑，你可以写下来。

没有什么特定于Angular可以加快abitrary控件的设置值，类似于你必须自己设置JavaScript变量的值。

然而，通过一些聪明的思考，你可以创建一个很好的界面来访问这些元素，即使它们之间没有逻辑关系。

要在index4和index10之间设置所有元素，您可以使用简单的for循环。您可以将其封装在函数中并重用此函数。

// Set a range of controls in the passed form
function setRange(form, from, to) {
  for (let i = 4; i <= 10; i++) {
    form.controls[`index${i}`].setValue(depthValue);
  }
}

// Usage
setRange(this.form, 4, 10)
setRange(this.form, 13, 21)
setRange(this.form, 30, 40)

当然，您可以通过同时处理多个范围将其提升到新的水平，因此您可以选择以下API。

setRanges(this.form, [[4, 10], [13, 21], [30, 40]])

我将实施留给读者。