An observable value is intertwined with another observable

indexData and indexEditData serve as the observables within my application. The purpose of indexData is to store a json object that is used to populate a table. Editing of table rows is facilitated by selecting individual rows, triggering the transfer of the selected row's json into indexEditData. This allows for modifications to be made within indexEditData without affecting the original values in indexData.

However, I am facing the challenge of preventing changes made in indexEditData from reflecting back onto indexData while editing.

private INDEX_DATA: any[] = [];
private indexDataSource = new BehaviorSubject(this.INDEX_DATA);
indexData = this.indexDataSource.asObservable();

private INDEX_EDIT_DATA: any[] = []; // For Grid in edit view 
private indexDataEditSource = new BehaviorSubject(this.INDEX_EDIT_DATA);
indexEditData = this.indexDataEditSource.asObservable();

Answer №1

Observing indexData is sufficient, there is no need to make indexEditData observable as it will only serve as a local state for the component.

Here are my suggestions:

  • Declare indexData as an observable (ReplaySubject), and keep indexEditData as a regular array of objects.
  • Retrieve data from your source and save it in indexData. Subscribe to it and store the value in indexEditData.
  • Use indexEditData for any update or editing operations.
  • Once editing is completed, update the value of indexData by calling indexData.next(indexEditData).

I hope this solution addresses your problem.

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

Solving the issue: Angular - Troubleshooting problems when downloading files from a Web API

I'm currently working on a project that utilizes ASP.NET Core-6 Web API for the backend and Angular-14 for the frontend. My current task involves downloading a PDF file, and the code snippet for it is provided below: Backend: ASP.NET Core-6 Web API: ...

Arrange an array in JavaScript according to the value of its keys

I am looking to rearrange an array of Objects with status 'Pass' & 'Fail'. I want to move all Fail ones to the top and Pass ones to the bottom. Is there a specific array method that can help achieve this? let a = [ { name: 'x&apo ...

What steps can I take to concentrate on a particular mat-tab?

<mat-tab-group mat-stretch-tabs #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="0"> <mat-tab label="DATOS EXPEDIENTE"> <div class="example-large-box mat-elevation-z4"> <app-informe-expediente></app ...

Tips for picking out a particular item from a list of child elements

When I select the first parent's children array, it ends up selecting every other parent's children as well. This is due to index 0 remaining the same for all of them. How can I specify and highlight a specific child? Link: Check out the stackb ...

Using Angular and Okta together can bring a seamless experience for your users. Learn how to properly use the redirect

I have integrated Okta for user authentication in my Angular 13 application. I followed the guidelines provided by Okta to utilize their SDK, but I am facing issues defining the redirectionUrl with the HashLocationStrategy. Upon logging in, I encounter a ...

Experimenting with a Collection of Items - Jest

I need to conduct a test on an array of objects. During the test coverage analysis of the displayed array, I found that the last object with the key link has certain conditions that are not covered. export const relatedServicesList: IRelatedServiceItem[ ...

What is the best way to set up an empty {[key: string]: string} object in TypeScript?

interface a { d: {[key: string]: string} } class a { d = {} } The error message returned is as follows: Subsequent property declarations must have the same type. Property 'd' must be of type '{ [key: string]: string; }', but ...

What is the method to empty input fields after data has been submitted in an Angular application?

    I'm facing a challenge with my web form. I have a dropdown menu using mat-select and an input field. When I click the submit button, the data is sent. However, I want the input field to clear after submission without affecting the mat-select dr ...

Error occurs on Chrome while Angular 7 HTTP POST works fine on Edge and Firefox

My application is experiencing a strange issue where the HTTP POST method works fine on Firefox and Edge browsers, but not on Chrome. The application is built using Angular 7 and .NET Core 2.2. It has a CRUD example that functions correctly in all browser ...

What factors contribute to 'tslib' having more downloads than 'typecrypt'?

How is it possible that 'tslib', a library for 'typescript', has more downloads than 'typescript' itself? If one does not use 'typescript', then they cannot utilize 'tslib' as well. Just because someone us ...

"Series of Subscriptions: Unleashing New

I have a ReplaySubject that is subscribed to by multiple components. I am curious about the order in which these subscriptions are processed. public getValue$ = new ReplaySubject<any>(1); If I send a value to getValue$ using getValue$.next(5); Assu ...

React: Issue with passing arguments to redux action hooks

In my React application, I have implemented Redux-Toolkit to manage reducers and actions with slices. I am currently working on creating actions that can update and delete values from the store, requiring arguments for their usage. To achieve this, I have ...

What is the best way to pass a specific property from a parent component to a child component in Angular when a button is clicked?

Hey there, I'm looking for a way to pass a single property (groupId) from a parent component to a child component. In this case, my child component is using ngx-bootstrap modal. Is there a solution available for this scenario? Essentially, I need to i ...

Error message: "Issue occurs when sending keys to protractor element's text value and

Having trouble running this code in Protractor as I keep encountering errors, and I'm unable to retrieve the value of the anpr_box_input text. Error message: ManagedPromise::871 {[[PromiseStatus]]: "pending"} failed - should have a valid license ...

Adjust the color of the label when the input is marked as invalid with .ng

My form is structured using a template-driven approach. <div class="form-group"> <label for="guitar" class="col-sm-6">Guitar:</label> <div class="col-sm-6"> <input id="guitar" type="text"> <p *ngI ...

When iterating through a list of strings using ngFor, I am unable to directly access or manipulate the individual items

Within my model, I have a list of strings. <span *ngFor="let item of model; let i = index"> <input #inputField type="text" [name]="name + '_' + i" [(ngModel)]="item" /> </span> The code snippet ab ...

Implementing the binding of components to another component post using forwardRef

I am looking to connect the Title and Body components with the Wrapper component. Previously, my component structure looked like this: import { FC } from 'react'; // binding required components const Title: FC<...> = () => {...} const ...

Encountering a dependency resolution issue in Angular application while executing npm install command

My Angular 9 (* UPDATE, should be Angular 11) project was developed on Ubuntu and Mac machines. The command npm install works perfectly fine in these environments. Now, I need to deploy it to a Linux Centos 7 server, so I decided to Dockerize the project. ...

Guidelines for allowing TypeScript to automatically determine the precise structure of data objects in a generic HttpServiceMock through the utilization of TypeScript Generics and Interfaces

I'm currently diving into TypeScript and trying to accomplish something that I'm not entirely sure is possible (but I believe it is). Here's an example of the code I have: interface HttpServiceMockData<T> { status: number; data: T ...

The error message for Angular FormControl's minimum length validation is not showing up in the errors

My goal is to access the minlength error, but when I check all the errors, it's not there. Below is my form control title: new FormControl("", [Validators.minLength(10), Validators.required]), I expect to see both the required and minlengt ...