私はこのテーブルを有するアンギュラ/活字体

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を設定します...なぜ12と11をスキップしますか？あなたはそれにいくつかの論理を持っているなら、あなたはそれを書き留めることができます。

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

私は実装を読者に任せます。