Ionic modal triggering double events

Can anyone help me solve the issue in my ionic app where a modal is fired twice when hitting an ion-button?

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

editProduct(id) {
        // retrieve product data by id
        this.afs.collection("products").doc(id)
            .valueChanges()
            .subscribe(data => {
                this.product = data
                // call modal and pass product id
                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

I successfully found the solution on my own.

To prevent double execution of the editProduct() subscribe method, I realized that I need to utilize a pipe from rxjs.

editProduct(id) {
        // Fetch product data by its id
        this.afs.collection("products").doc(id)
            .valueChanges()
            .pipe(
                first()
            )
            .subscribe(data => {
                this.product = data;
                // Call the modal and pass the product id
                this.modalProduct(id);
            });
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extract metadata from a webpage using JavaScript regular expressions

Looking to extract meta tags data using JavaScript (jQuery) and regex. Below are some examples of meta tags: <meta name="description" content="Amazon.com : Google Chromecast HDMI Streaming Media Player : Streaming Media Clients : Electronics" /> &l ...

Turning JSON data into an HTML table dynamically using jQuery for every single attribute

I have successfully accessed the json response and now I am looking to convert it into tables. The code snippet below demonstrates how I am parsing data related to the weather of different cities. <!DOCTYPE html> <html> <head> & ...

Restrict the vertical camera rotation

Utilizing JSModeler for showcasing OBJ files. The software integrates THREE.JS and generates a PerspectiveCamera. My goal is to restrict the camera's Y-axis movement to prevent it from going beneath the object. While I am familiar with achieving this ...

Providing an array of unique string elements with specific variable names attached

Is there a way to consolidate multiple useWatch calls into one by passing in an array of strings for the 'name' parameter? const values = useWatch({name: ['name', 'description', 'category']}); ...

Ways to change the background color of cells with spaces in HTML to black

https://i.sstatic.net/rmtR1.png How can I change the cells that have a space or any separator to be black in color? This snippet shows my HTML code: <table > <thead class="table table-bordered table-responsive"> ...

jQuery pagination issues can arise when attempting to incorporate animation effects

Query 1: What could be the reason for the pagination not updating after clicking on it (the page changes but the content does not)? For instance, in this example I provided, the pagination does not update after being clicked: SAMPLE: My code Query 2: ...

When the async attribute is added to the HTML code, Angular is no longer defined

Looking to optimize the performance of my website in Chrome Audit, I decided to add 'async' to my script tag like this: <body ng-cloak id="body"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry ...

Exploring the World of Github on Windows: Understanding the 'master' and 'gh-pages' Branches

I have developed a simple jQuery plugin and uploaded it to Github. I am using both the Github website and Github for Windows to manage this project. However, when I try to include the .js or .css files from Github using the Raw links, my browser fails due ...

Blending Borders Using Transparent Shader Material in Three.js

As a newcomer to the world of webgl, I have been learning about shaders and recently tried to create a smooth, transparent cloud. While I was successful in achieving this, there seems to be an issue with overlapping edges looking jagged in the images provi ...

html and css code to create a linebreak ↵

I received a JSON response from the server, and within this data is a "return line" in the text. {text: "I appear in the first line ↵ and I appear in the second line"} However, when I try to display this on an HTML page, the "return line" does not show ...

Error encountered in MySQL and NodeJS: Unable to add new query after invoking quit with transactions

While working on implementing MySQL for NodeJS and Restify, I encountered a flawless experience with queries. However, when attempting to utilize data updating functionality through transactions, I faced the error message: Error: Cannot enqueue Query after ...

Struggling to retrieve a particular field from Mongodb with the .find() method (Beginner)

I am a novice. Here is my code. Essentially, I am storing my JWT in MongoDB and it is being stored properly. However, when I try to fetch that token to verify it, I am unable to retrieve it. The console.log(find_refreshtoken) is displaying unexpected data ...

Is it feasible to utilize "type A = Promise<any>" as a returned type for an asynchronous function?

async function AsyncFunction(): Promise<number> { return 0; } Runs smoothly without any issues; async function AsyncFunction(): AsyncFunctionReturnType { return 0; } type AsyncFunctionReturnType = Promise<number> Generates an error mess ...

The consistency of value assignment to an element within an object during a loop in vueJS

Struggling to grasp the workings of JavaScript, specifically Vue.js in this scenario... The provided code snippet is as follows: .... data() { campaigns: [{id: 1, name: 'Campaign 1'}, {id: 2, name: 'Campaign 1'}] campaignsWithEve ...

Enhance your bootstrap accordion by incorporating stylish up and down arrows using the <accordion> element

I am currently developing a sophisticated web application using Angular and TypeScript, and I have decided to incorporate accordions in some sections. The setup for these accordions involves TypeScript/Bootstrap as shown below: <accordion> <acco ...

The functionality to import JSON data into Google Spreadsheets is compromised when the API includes the characters " | "

I am attempting to bring JSON data into Google Sheets using a Wikidata API. However, one of the symbols utilized in this API is the vertical bar: |. It serves as an "and". For instance, if I wish to import data in BOTH English and Greek, then I need to us ...

Controlling dropdown menus filled with AJAX responseData

When it comes to Javascript, JQuery has always been a reliable companion for me. However, there are instances where I encounter challenges that require some extra effort to overcome. Today happens to be one of those days. I've stumbled upon an issue t ...

Having difficulties utilizing the JSON response efficiently

Currently, I am utilizing datatables to display data and I am looking for a way to fetch language settings from my server efficiently. The challenge lies in formatting the data in a manner that allows this process; I prefer using json format with minimal m ...

The issue I'm facing is that the itemlist dialog in material-ui for React JS

Trying to create a todolist using material ui and react but encountering an issue. When a listitem is clicked, I want to open a dialog with detailed information. However, I'm having trouble closing the dialog after opening it. Here's the code sni ...

Tips for accessing child elements within an Angular component

I'm struggling to get a reference of child elements within a component. I have experimented with ElementRef, TemplateRef, QueryList, ViewChild, ViewChildren, ContentChild, and ContentChildren without success. <app-modal> <section #referenc ...