Angular2 と ng2-dragula (dragula ベース) を使用してツリー コントロールを作成しています。私は現在、ネストされた繰り返しの例hereと非常によく似たものを使用しています。リストへの読み込みに問題はなく、ドラッグ アンド ドロップを期待どおりに動作させることもできます。私がする必要があるのは、ボタンをクリックし、http サービスに戻って新しいデータを取得し、ページ上のデータを更新することです。私は、javascript を使用して ID を検索し、そのように更新できることを知っていますが、それを処理する適切な方法とは思えません。
ここに私のコンポーネントコードがあります - これが行うのは、ビューデータを上書きし、変更されたドラッグなどを完全に元に戻すことだけです(これは設計によるものだと確信しています)。私は dragulaModel を使用するためにさまざまな方法を試しましたが、何が起こってもコンポーネント全体が再レンダリングされます。子テキストを更新できるようにする必要があります
私はAngularが初めてで、正しいパターンに従っていることを確認したい
item.component.ts
loadItems(){
this._itemsService.getIems();
}
reloadIems(){
this._itemsService.getItems();
}
item.component.html
<div *ngIf="items">
<div class="holder">
<div *ngFor="let item of items | async">
<div (click)="checkCollapsed(item.text)" >
<div *ngIf='item.children' [dragula]='"first-bag"'>
<div *ngFor='let child of item.children' class="item">
<span class="handle">+</span><span id='{{child.id}}' [innerHtml]="child.text"> </span>
</div>
</div>
</div>
</div>
</div>
</div>
編集
.subscribe を追加してから手動で更新loadItems()すると、思い通りに動作します。このようにオブジェクト全体を手動で更新する必要がありますか? ハックのようだthis.itemsthis.items[0].children[0].text = "1000"reloadItems()
**編集 2 ** loadItems() をサブスクライブし、reloadItems の 2 つのオブジェクトを比較して、そこで必要な変更を加えることで、なんとか動作させることができました。サブスクライブのため、自動更新されていると思います。誰でも間違っている/正しいことを確認できますか(ここでplnkrを操作し、角度依存関係を除外します)