在firebase Angular中，我使用snapshotchanges订阅获取数据，但每当我在另一个函数中更新日期时，订阅调用两次

Question

在我的角度应用程序的组件之一中，我在 ngOnInit() 函数中运行以下代码。

const current_date = new Date();
        this.afs.collection('/layouts', ref => ref.where('store_uid', '==', this.current_store_uid).orderBy('start_date', 'desc')).snapshotChanges().subscribe(data => {
            this.current_layout_data = []
            data.forEach((docs: any) => {
                const startDate = docs.payload.doc.data().start_date.toDate()
                const endDate = docs.payload.doc.data().end_date.toDate()
                if (startDate <= current_date && endDate > current_date) {
                    this.current_layout_data.push(docs.payload.doc.data())
                }
            })
            this.layoutData()
        });

在上面的代码中，我运行Firebase的查询来获取布局数据并应用一些条件。
我使用 snapshotchanges() 并订阅，因为我想在 HTML 中实时显示数据以向用户显示。

之后，我更新按钮上的数据，单击我运行以下函数来更新 Firebase 中的数据

async trigger_from_publish_btn(data) {
        try {
            const start_date = new Date(data.start_date.replace(/\-/g, '/'));
            const end_date = new Date(data.end_date.replace(/\-/g, '/'));
    
            start_date.setHours(0, 0, 0, 0); // Set to 00:00:00
            end_date.setHours(23, 59, 59, 999); // Set to 23:59:59.999
            console.log("trigger_from_publish_btn", data);
    
            await this.afs.doc('/layouts/' + this.current_template_id).update({
                uid: data.uid,
                layout_type: data.layout_type,
                layout_json: data.layout_json_saved,
                include_header_checkbox: data.include_header_checkbox,
                start_date: start_date,
                end_date: end_date,
                actual_start_date: new Date(data.actual_start_date.replace(/\-/g, '/')),
                actual_end_date: new Date(data.actual_end_date.replace(/\-/g, '/')),
                header_text: data.header_text,
                terms: data.terms,
                layout_json_saved: data.layout_json_saved,
                layout_json_temp: data.layout_json_temp,
                page1_type: data.page1_type,
                page1_url: data.page1_url,
                page2_type: data.page2_type,
                page2_url: data.page2_url,
                page3_type: data.page3_type,
                page3_url: data.page3_url,
                page4_type: data.page4_type,
                page4_url: data.page4_url,
                page5_type: data.page5_type,
                page5_url: data.page5_url,
                is_publish: data.is_publish,
            });
    
            console.log('Data updated successfully');
        } catch (error) {
            console.error('Error updating data:', error);
            throw error;
        }
    }

每当我更新 firebase 中的数据时，订阅查询就会运行两次，这就是为什么layoutData()函数调用两次。

有人知道我做错了什么吗？

我在 ngOnDestoy() 方法中取消了所有订阅者的订阅，但仍然遇到同样的问题。

我只想在更新数据后运行订阅者查询一次。

Answer 1

检查以前的订阅并使用 ngOnDestroy() 销毁它们，检查您的组件是否正在重新初始化，即每当您单击更新按钮时它是否再次触发layoutData()（您可以通过在 this.layoutData() 上放置断点来找到它，当单击“更新”按钮）。请记住在不使用组件后销毁订阅。 或者您可以在代码后面提供有关组件的更多信息，以便我可以查看并找出导致问题的原因，但在此之前请尝试上述操作。