`Inconsistencies in console.log output with Angular Firestore``

I'm currently working on retrieving the id of selected data, but when I test it using console.log, it keeps outputting twice. The image below illustrates the console.log output.

https://i.stack.imgur.com/IARng.png

My goal is to fetch the id once and then transfer it to another collection using the archive method instead of delete. Although I've successfully copied it to another table, it ends up being duplicated, hence why I am testing it in the console first.

Below are my code snippets for handling a click on the delete button:

employee.service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';
@Injectable({
     providedIn: 'root'
})

export class EmployeeService {
     constructor(private firestore: AngularFirestore) { }

     deleteEmployee(id: string): Promise<any> {
          return this.firestore.collection('employees').doc(id).delete();
      }
}

list-employees.component.ts

deleteEmployee(id: string) {
this._employeeService.getEmployee(id).subscribe(data => {
  console.log(id);
   })
}

I would greatly appreciate any assistance and please let me know if additional code is needed for reference. Thank you!

Answer №1

Consider using either first or take(1):

removeEmployee(id: string) {
  this._employeeService.getEmployee(id).pipe(take(1)).subscribe(data => {
    console.log(id);
  });
}

This way, you will stop listening to changes once the employee has been deleted.

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

Guide on importing absolute paths in a @nrwl/nx monorepo

I am currently working on a @nrwl/nx monorepo and I am looking to import folders within the project src using absolute paths. I attempted to specify the baseUrl but had no success. The only solution that did work was adding the path to the monorepo root ts ...

Leveraging the expand function for pagination through recursive invocations

I am currently working on retrieving data from a third party API that necessitates manual management of paging by keeping track of the number of records retrieved versus the total number of records available. In attempting to handle this, I experimented w ...

Customizing Angular with SASS Theming

After coming across the query How can switchable themes be implemented in SCSS?, particularly the second response which drew inspiration from this insightful Medium post, I decided to try implementing themes using SASS on my project. Unfortunately, I hav ...

Changing the language can lead to an ExpressionChangedAfterItHasBeenCheckedError when the translated value is found within a mat-option

Choose a value from the dropdown menu, then toggle the switch button. An error message labeled 'ExpressionChangedAfterItHasBeenCheckedError' will appear in the console. Click here for an example This issue cropped up after upgrading my Angular ...

Creating a variable as a list of string arrays in TypeScript

Currently working with Angular 2.0, I am trying to declare a variable in a Typescript file that is a list of string arrays. I attempted using yAxis_val: list, but it is not functioning correctly. If anyone knows the proper way to achieve this, please prov ...

Incorporating Ionic v3 with the latest StripeJS/Stripe Elements version 7.26.0

I have encountered two separate issues while trying to integrate the new version of Stripe into my Ionic v3 app. (Please refrain from suggesting an upgrade to Ionic v5, as it is currently not feasible for our team at this time!) Within my ionDidLoad funct ...

Angular: using the filter pipe to render HTML content

When using the pipe, I encounter an issue where the css is not being applied to highlight the searched words in a list. Instead of displaying the yellow background for the searched words, it outputs and displays the tag below: <span class='highlig ...

Compiling Typescript tasks in Visual Studio Code - ensuring output encoding is set correctly

Have you tried manually setting up a typescript compilation task in Visual Studio Code? You can find detailed instructions at this link. When you run the build command (Ctrl+Shift+B), are you seeing an error message from tsc with unknown encoding? Check o ...

Using TypeScript import statements instead of the <reference path...> in an ASP.NET Core web application: A step-by-step guide

Understanding the Setup I initially had a functional TypeScript Hello World in my ASP.NET Core Web application. To compile TypeScript, I used the NuGet package "Microsoft.TypeScript.MSBuild" Version="4.4.2" along with a tsconfig.json f ...

Tips on performing a join in an AngularFire2 database

I have been searching diligently but am still unable to find the correct answer. Any guidance towards the right direction would be greatly appreciated. My database contains information on users and projects: projects: 08177a0acb3f4d96f8cb5fa19002d2ed ...

What is the best way to maintain the routerLinkActive state when navigating to another component page that is related to the current page

Why does the navigation link become inactive when routing from myloans to syncmyloans? How can I maintain navigation activation when moving to related sub pages within the main navigation? Navigation <nav> <ul class="navbar-nav ml-auto&q ...

Angular2 Service Failing to Return Expected Value

It's frustrating that my services are not functioning properly. Despite spending the last two days scouring Stack Overflow for solutions, I haven't been able to find a solution that matches my specific issue. Here is a snippet of my Service.ts c ...

In Angular, you can easily modify and refresh an array item that is sourced from a JSON file by following these steps

Currently, I am working on implementing an edit functionality that will update the object by adding new data and deleting the old data upon updating. Specifically, I am focusing on editing and updating only the comments$. Although I am able to retrieve th ...

Schematic tool for updating ViewChild in Angular 8 upgrade

Currently, I am in the process of following a guide to upgrade an Angular project to Angular 8. In order to complete this upgrade, it has been highlighted that it is now necessary to specify when ViewChild should be initialized using the static variable as ...

What is the reason for not being able to call abstract protected methods from child classes?

Here is a simplified version of my project requirements: abstract class Parent { protected abstract method(): any; } class Child extends Parent { protected method(): any {} protected other() { let a: Parent = new Child() a.me ...

Live reload functionality in Webpack is currently not functioning as expected when utilized with the Angular

Recently purchased a template that incorporates Angular. I diligently followed all the initial setup steps, but encountered an issue with live reloading once I started making changes to the project. It is also worth noting that the project utilizes Webpa ...

Attempting to perform an API invocation on a distant endpoint utilizing NestJS

var unirest = require("unirest"); var req = unirest("GET", "https://edamam-edamam-nutrition-analysis.p.rapidapi.com/api/nutrition-data"); req.query({ "ingr": "1 large apple" }); req.headers({ &qu ...

Discover the geolocation data for post code 0821 exclusively in Australia using Google Maps Geocoding

I'm having trouble geocoding the Australian postcode 0821. It doesn't seem to reliably identify this postcode as being located within the Northern Territory, unlike 0820 and 0822 which work fine. Here's an example of what I'm doing: ...

Dynamically apply classes in Angular using ngClass

Help needed with setting a class dynamically. Any guidance is appreciated. Below is the class in my SCSS file: .form-validation.invalid { border: 2px solid red } In my ts file, there's a variable named isEmailValid. When this variable is set to ...

Sending JSON data from Angular to WCF

Attempting to utilize the post method in Angular to send JSON data to a WCF service. The data is being sent in JSON format from Angular, however, the WCF service is receiving it as a null object. Is it possible to use the get method to send JSON data? Th ...