离子模式触发两次

Question

我的 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();
    }

Answer 1

我自己想出来的

我需要使用 rxjs 中的管道来防止重复执行 editProduct() 订阅方法。

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);
            });
    }

离子模式触发两次

Ionic modal fires twice

javascript

typescript

ionic4