0

我有一个 AngularFireList 项目。

我将项目拆分为数组,并根据每个项目的位置值(对应于 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');

    });
}
4

2 回答 2

1

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

于 2018-05-02T22:12:55.490 回答
0

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

HTML 片段:

this.itemList.find(item => item.name == itemName).location = destination;
this.itemService.updateItem(this.itemList.find(item => item.name == itemName));
于 2018-05-03T20:08:03.217 回答