3

我正在使用Angular2和ng2-dragula（基于dragula）编写一个树控件。我目前正在使用与此处的示例嵌套重复示例非常相似的东西。我在列表中加载并按预期进行拖放没有问题。我需要做的是单击一个按钮，返回 http 服务获取新数据，然后更新页面上的数据。我知道我可以使用 javascript 来查找 id 并以这种方式进行更新，但这似乎不是处理它的正确方法。

这是我的组件代码 - 所有这些只是重写视图数据并完全撤消任何更改的拖动等（我确定这是设计使然）。我尝试了很多不同的方式来使用 dragulaModel，但是无论发生什么，整个组件都会重新渲染。我需要能够更新子文本

我是角度新手，想确保我遵循正确的模式

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>

编辑 如果我添加一个 .subscribeloadItems()然后this.items手动更新它就像我想要的那样工作this.items[0].children[0].text = "1000"。reloadItems()我应该以这种方式手动更新整个对象吗？看起来像一个黑客

**编辑 2 ** 我设法通过订阅 loadItems() 然后比较 reloadItems 中的 2 个对象，然后在那里进行任何必要的更改来使其工作。我认为由于订阅它是自动更新的。任何人都可以确认我是否做错/正确（在这里工作 plnkr ，忽略角度依赖）

4

0 回答 0