Javascript 离子模态发射两次

我的ionic应用程序在点击ion按钮时会触发两次模态。 我不明白为什么会这样

 <ion-button (click)="editProduct(p.id)" fill="clear">
                                <ion-icon name="cloud-upload"></ion-icon>
                            </ion-button>

editProduct(id) {
        // obter dados do  produto pelo seu id
        this.afs.collection("products").doc(id)
            .valueChanges()
            .subscribe(data => {
                this.product = data
                // chamar o modal e enviar o id do produto
                this.modalProduct(id);
            });
    }

async modalProduct(id) {
        const modal = await this.modalCtrl.create({
            component: AdminProductPage,
            componentProps: {
                'id': id,
                'title': this.product.title,
                'description': this.product.description,
                'price': this.product.price,
                'image': this.product.image
            }
        });
        await modal.present();
    }

编辑产品（id）{
//圆顶护墙板可用于生产pelo seu id
此.afs.集合（“产品”）.doc（id）
.valueChanges（）
.订阅（数据=>{
这个产品=数据
//chamar o modal e enviar o id do produto
这个.modalProduct（id）；
});
}
异步modalProduct（id）{
const modal=等待this.modalCtrl.create({
组件：AdminProductPage，
组件和支柱：{
“id”：id，
“title”：this.product.title，
“description”：this.product.description，
“价格”：this.product.price，
“image”：this.product.image
}
});
等待模态present（）；
}

我自己想出来的

我需要使用rxjs中的管道来防止editProduct（）subscrive方法的双重执行

editProduct(id) {
        // obter dados do  produto pelo seu id
        this.afs.collection("products").doc(id)
            .valueChanges()
            .pipe(
                first()
            )
            .subscribe(data => {
                this.product = data
                // chamar o modal e enviar o id do produto
                this.modalProduct(id);
            });
    }