2017-11-07 4 views
0

私はさまざまなタイプのコンポーネントを手に入れています。さて、各コンポーネントのいくつかの状態プロパティを解析し、それらをJSON形式でサーバーに送信したいと考えています。 xywidthheight複数のコンポーネントのプロパティをパースする

は、例えば、各box成分は状態特性を有します。すべてのボックスのJSONは次のようになります。

{ 
projectName:"SOMENAME", 
projectDate:"SOMEDATE", 
boxes:[ 
    {x:1,y:12,width:123, height:321}, 
    {x:19,y:12,width:773, height:21}, 
    {x:876,y:122,width:3, height:31} 
] 
} 

注文は重要です。ボックスコンポーネントが作成されると、それも操作され、JSONモデルで変更を更新する必要があります。

私がこれを行う方法は、各コンポーネントに固有の識別子を与え、Dataという別のデータクラスを作成することです。このクラスはフィールドprojectName,projectDateおよび配列boxesも持ち、一意の識別子も格納されます。私はDataのオブジェクト全体にJSON.stringify()を呼び出し、それをサーバーに送ります。

これは方法ですか?私は記述したこの問題を解決するために角度が好むのですか?どのような方法をお勧めしますか?

HTML

<app-box-component *ngFor="let box of boxes"> </app-box-component> 

BoxComponent.ts

export class BoxComponent implements onInit{ 

//state properties that need to be send to server. Collected from every box component. 
x:number; 
y:number; 
width:number; 
height:number; 

} 
+0

問題を明確に理解するためのコードをいくつか追加してください。 –

+0

確かに、私はそれが助けてくれることを願っています。 – sanjihan

答えて

0

角度アプリでの状態を扱うの推奨方法はngrx店です。 ユーザがボックスとやり取りするときには、BoxUpdatedのようなメッセージを送信し、ngrxエフェクトの内部でこの変更をサーバに伝播させることができます。あなたのngrxストアはすべての初期ボックスデータを含むことができます。

関連する問題