反応型フィールドを線形配列にマップするにはどうすればよいですか？

Question

Charts JS用のデータ配列（Angularモジュールとして）を作成する必要があります。それは[1,2,3]のような単なる線形配列です。

この配列のソースデータは、反応型の一部です。 それはそうのように見えるのJSON形式では：チャートJSの配列が最新常に含まれている必要がありますので、[10, 20, 30]が、それらは反応性フォームフィールドに「縛ら」する必要があります。

{ 
    "name": "test", 
    "elements": [{ 
     "id": "1", 
     "count": "10" 
    }, 
    { 
     "id": "2", 
     "count": "20" 
    }, 
    { 
     "id": "3", 
     "count": "30" 
    }] 
} 

私はcountの要素を持つ配列を取得したいですそれが可能ならば、要素。私は双方向のデータバインディングを使用しようとする可能性がありますが、反応形式を混在させることは悪い考えだと聞きました。[(ngModel)]

したがって、反応形式の 'count'フィールドを線形配列要素にマップする方法と最新の状態に保つ？

ありがとうございます！

Answer 1

まず、フォームが編集されるたびに更新、カウントの配列に観察可能な取得するvalueChangesフィールドを使用します。

const counts$ = this.formGroup.valueChanges.map(data => { 
    return data.elements.map(e => e.count); 
}); 

は、その後、いくつかの方法であなたのチャートライブラリにその観察可能なネクタイ。サブスクライブを使用した例（サブスクライブを忘れないようにしてください）：