I have an AngularFireList of items.
I split the items into arrays and use those to populate several divs for one dragula bag based on each item's location value which corresponds to the div's ID.
On dropping one item into another div the dragged item's location value is updated to the id of the new div. All this works as expected but the updates to the item's location value is not being saved to Firebase, so when I inspect the item I see the updated value but if I refresh the page nothing has been saved.
Where have I gone wrong?
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');
});
}
