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

Question

我有这个Table：

当用户select选中左上角的复选框时，它会根据另一个表单的值更改table中每个框的值控制在上面。如果他们 select 任何其他人，只有该行中的值会改变。

所以，截至目前，我是这样处理这些变化的：

在我的 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
    }

所以我的问题是：是否有一种 easier/less 冗长的方法可以将值应用于所有这些框，这样我就不必将数百行代码专门用于简单地更改为 a 的值数字框？

Answer 1

只要您在逻辑上正确地组织数据，就可以做到。根据给定的信息，我们不知道数字之间有什么关系。您向我们展示的代码将索引设置为 4 - 10、13-21 ... 为什么它会跳过 11 和 12？如果你对此有一些逻辑，你可以写下来。

没有什么 Angular-specific 可以加快任意控件的设置值，类似于您必须自己设置 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]])

我将实施留给 reader。

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

Changing the value of multiple controls easily using Angular/TypeScript

typescript

form-control

angular