Javascript 使用ReplaySubject的Angular 2火基积垢

Javascript 使用ReplaySubject的Angular 2火基积垢,javascript,angular,firebase,firebase-realtime-database,rxjs,Javascript,Angular,Firebase,Firebase Realtime Database,Rxjs,我没有从屏幕上删除已删除的项目 新的或更新的项目会反映在屏幕上,但我不知道如何反映已删除的项目 我甚至创建了一个单独的列表(使用findIndex、emit方法)并将该列表中的元素拼接在一起,但效果并不理想 我的提供商: export class AssetTypeService { private assettypes$: any; private assettypesRef: any; private assettypeslist: AssetType[] = [

我没有从屏幕上删除已删除的项目

新的或更新的项目会反映在屏幕上,但我不知道如何反映已删除的项目

我甚至创建了一个单独的列表(使用findIndex、emit方法)并将该列表中的元素拼接在一起,但效果并不理想

我的提供商:

export class AssetTypeService {

    private assettypes$: any;
    private assettypesRef: any;

    private assettypeslist: AssetType[] = [];

    constructor(private http: Http) {
        this.assettypesRef = firebase.database().ref('asset-type');
        this.assettypesRef.on('child_added', this.handleDataChildAdded, this);
        this.assettypesRef.on('child_changed', this.handleDataChildAdded, this);
        this.assettypesRef.on('child_removed', this.handleDataChildRemoved, this);

        this.assettypes$ = new ReplaySubject();
    }

    get getAssetTypes() {
        return this.assettypes$;
    }

    handleDataChildAdded(snap) {
        try {
            let type: AssetType = <AssetType>{};

            type.id = snap.key;
            type.description = snap.val().description;

            this.assettypes$.next(type);
        } catch (error) {
            console.log('catching', error);
        }
    }

    handleDataChildRemoved(snap) {
        try {

            let index: number = this.findIndex(snap.key);

            if (index !== -1) {
                this.assettypeslist.splice(index, 1);
                this.emit();
            }
        } catch (error) {
            console.log('catching', error);
        }
    }

    private findIndex(key: string): number {
        return this.assettypeslist.findIndex((assetType: AssetType) => {
            return assetType.id === key;
        });
    }

    private emit(): void {
        this.assettypes$.next(this.assettypeslist);
    }

    saveAssetType(assetType: AssetType) {
        if (assetType.id == undefined) {
            assetType.id = firebase.database().ref().child('asset-type').push().key;
        }

        var updates = {};
        updates['/asset-type/' + assetType.id] = assetType;

        return firebase.database().ref().update(updates);
    }

    getAssetType(uid: string) {
        let assetType: AssetType = <AssetType>{};

        return firebase.database().ref('/asset-type/' + uid).once('value').then(function (snapshot) {
            assetType = { id: snapshot.key, description: snapshot.val().description };
            return assetType;
        });
    }

    deleteAssetType(uid: string) {
        return firebase.database().ref('asset-type/' + uid).remove();
    }
}
ngOnInit() {
    this.getAssetTypes();
}

getAssetTypes() {

    this.assetTypeService.getAssetTypes.subscribe((data) => {

        let alreadyExists = false;

        this.types.forEach(function (assetType) {
            if (assetType.id == data.id) {
                alreadyExists = true;
                assetType.description = data.description;
            }
        });

        if (!alreadyExists) {
            this.types.push(data);
        }

    }, (err) => {
        console.error(err);
        console.log(err);
    });
}

deleteAssetType(uid: string) {
    this.assetTypeService.deleteAssetType(uid).then(data => {
        this.showToast('Asset type deleted successfully');
    });
}