0

我有这张表：桌子

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

因此，截至目前，这是我处理这些更改的方式：

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

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

4

1 回答 1

1

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

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

我将实现留给读者。

于 2017-08-17T18:59:57.563 回答