容易地改变多个控件的值使用角度/打字稿

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 
    } 

所以我问题是：将值应用于所有这些框的方法是否更容易/更省略，因此我不必将数百行代码专门用于简单更改值一个数字框？

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]]) 

我将实施留给读者。