Angular Dragula - 不更新掉落时的火力基地

Question

我有一个AngularFire项目列表。

我将项目拆分为数组，并根据每个项目的位置值(对应于div 的 ID(使用这些数组为一个 dragula 袋填充多个div。

将一个项目拖放到另一个div 中时，拖动项目的位置值将更新为新div 的 id。所有这些都按预期工作，但对项目位置值的更新没有保存到 Firebase，因此当我检查项目时，我看到了更新的值，但如果我刷新页面，则没有保存任何内容。

我哪里做错了？

.HTML：

<div 
[dragula]='"bag-equipment"' 
[dragulaModel]="equipmentArmor"
id="armor"
>
<mat-card *ngFor="let item of equipmentArmor">
{{ item.name }}
</mat-card>
</div>
<div 
[dragula]='"bag-equipment"'
[dragulaModel]="equipmentBagOfHolding"
id="bagOfHolding"
>
<mat-card *ngFor="let item of equipmentBagOfHolding">
{{ item.name }} 
</mat-card>
</div>

TS：

ngOnInit() {
this.dragula.drop.subscribe(value => {
// Get location item is dragged to
let destination = value[2]['id'];
// Get item's name and clean it up
let itemName = value[1]['innerText'];
itemName = value[1]['innerText'].trim();
itemName = itemName.slice(0, -5);
// Update the FireList's itemList
this.itemList.find(item => item.name == itemName).location = destination;
});
let data = this.itemService.getData();

data.snapshotChanges().subscribe(item => {
this.itemList = [];
item.forEach(element => {
let json = element.payload.toJSON();
json["$key"] = element.key;
this.itemList.push(json as Item);
});
this.itemList = this.itemList.filter(item => item.equippable == true);
this.equipmentArmor = this.itemList.filter(item => item.location == 'armor');
this.equipmentBagOfHolding = this.itemList.filter(item => item.location == 'bagOfHolding');
this.equipmentMisc = this.itemList.filter(item => item.location == 'misc');
this.equipmentWeapons = this.itemList.filter(item => item.location == 'weapons');
});
}

Answer 1

我猜 equipmentBagOfHolding/this.itemList 与从 itemService.getData(( 返回的数组不是同一个数组。 由于您的 UI 与这些数组相关联，因此当它们更改时，它会更新，但来自 itemService.getData(( 的数组不会。

Answer 2

所以我终于意识到更新模型不会将更新推回 Firebase;我已经习惯了 Angular 插值，我完全忘记了 Firebase 不会自动更新。所以我只是将更新的对象推回去，一切都按预期工作。只是表明99%的时间这是最愚蠢的事情。

网页代码段：

this.itemList.find(item => item.name == itemName).location = destination;
this.itemService.updateItem(this.itemList.find(item => item.name == itemName));