Tips for deleting row data that was mistakenly added as true in response in Angular 2 when it should actually be false

Hello, I have a set of data that is initially pushed to the response as true. However, before submitting the form, I need to change some options so that I receive a false response. In order to do this, I must remove a specific item from the array.

TS:

onChangeMedication(value, rowData) {
    let exe = this.exeTypeNumber(value);
    this.medicationTableValue.map(details => {
      let medicationObj = { ...medicationFields };
      if (details.code === rowData.code) {
        if (value != '17587') {
          let params = { PatientId: this.userId, ExeType: exe, TableId: 'medication', Param1: rowData.name, Param2: rowData.date ? new DatePipe('en').transform(rowData.date, 'yyyy-MM-dd HH:mm:ss') : null, Param3: null }
          this.emrservice.ccdRecord(params)
            .subscribe((res) => {
              this.validStatus(res.Body.Data, rowData);
              if (res.Body.Data) {
                this.exportCCDSuperObj.medication.push(medicationObj);
              } 
            });
        }
      };
    });
  }

This function will return a API response of true or false.

validStatus(data, rowData) {
    this.isValidItems = data
    if (!this.isValidItems) {
      rowData.showNoStatus = true;
      rowData.showYesStatus = false;
      this.isDisabled = false;
    } if (this.isValidItems) {
      rowData.showYesStatus = true;
      rowData.showNoStatus = false;
      this.isDisabled = true;
    }

  }

HTML:

<td>
              <select (change)="onChangeMedication($event.target.value,rowData)" [value]="defaultValue">
                <option value=''>Select Record</option>
                <option *ngFor="let sType of validType" [value]='sType.Id'>{{sType.Description}}</option>
              </select>
            </td>
            <i class="fa fa-times" aria-hidden="true" *ngIf="rowData.showNoStatus"></i>
            <i class="fas fa-check" *ngIf="rowData.showYesStatus"></i>

Answer №1

One way to remove an item from your array is by creating a new array that does not include the specific item, like this:

this.yourArray = this.yourArray.filter(element => element.property == “Something”);

By doing this, you will create a new array without any elements that match your condition.

Answer №2

After experimenting with this approach, I successfully achieved the desired outcome. Now, I have the ability to remove an item from the array by clicking on the response change.

TS:

When handling the onChangeMedication function with the parameters value and rowData, I perform a type conversion operation using exeTypeNumber(). Looping through the medicationTableValue array, I create a copy of the medicationFields object for each iteration. If the code of the current detail matches the code of the rowData, a series of conditional checks are performed. If the value is not '17587', a set of parameters is defined and passed to the emrservice.ccdRecord() method. Upon receiving the response, the validStatus function is executed based on the data returned. Depending on the result, the medicationObj object is either added to the exportCCDSuperObj.medication array or removed from it.

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

Having difficulty configuring the new Faker library

I've been working on setting up the brand new @faker-js/faker library. Here's what I have done so far: npm i @faker-js/faker -D I added faker.d.ts at the top level of the tree, so it looks like this: https://i.sstatic.net/Hkzh8.png The content ...

Upgrade Angular from version 8 to the newest release, version 13

Recently started working with Angular and was tasked with updating a project from version 8.2 to 13.0. However, I encountered some challenges. I am facing conflicting peer dependency issues, and even after using the --force flag, I still receive the error ...

Display event using Angular

I am currently working on an Angular project where I need to print a specific area of the page. While I know that this can be done using media CSS, it is causing issues for me due to the numerous print functionalities present in the project. I am attemptin ...

The unit test ends right before reaching the RxJS skipWhile method

of({loadstatus: Loaded}) .skipWhile(user => user.loadStatus !== Loaded) .take(1) .subscribe(user => do some stuff) I am puzzled by why a unit test is not triggering the skipWhile function in the code snippet above. When I set a breakpoin ...

Creating a virtual whiteboard using a captured screen shot

Can anyone suggest a tool that can enhance my ability to create a feature allowing users to capture screenshots of my website and annotate them with drawings or notes? Are there any existing browser technologies or plugins that offer similar functionality ...

Angular renderer's setStyle method does not support the application of linear-gradient

Why won't Angular's renderer2 apply linear-gradient CSS in this code snippet? Can anyone provide insights? export class AppComponent implements OnInit { constructor(private renderer: Renderer2, private elementRef: ElementRef) {} public ngOn ...

Angular Interceptor failing to assign headers in HTTP requests

Although I am successfully setting the authToken value from my login component with a valid token (verified using Postman), the issue arises when no Authorization parameter is being added to my request header. entryComponents: [ ConfirmDialogTarget ...

Tips on invoking a child component's function from the parent component

I'm struggling to comprehend, Is there a way to trigger a function within a child component by clicking on a button in the parent component? ...

Injecting Dependencies in Angular 2 Without Using the Constructor

Exploring DI in Angular 2 has led me to implement a REST-Client using generic subtypes for concrete Datatypes like this: class RESTClient<T>{ constructor() { var inj = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]); this. ...

Encountering an unanticipated DOMException after transitioning to Angular 13

My Angular project is utilizing Bootstrap 4.6.2. One of the components features a table with ngb-accordion, which was functioning properly until I upgraded the project to Angular 13. Upon accessing the page containing the accordion in Angular 13, I encount ...

What is the best way to remove all selected items in a dropdown menu?

My issue pertains to Angular and Typescript. I am facing a challenging problem with a dropdown menu that has 3 items. The unique aspect is that I am not utilizing the standard select HTML tag; instead, I am using my company's custom toolkit, which ser ...

Using AngularFire2 to manage your data services?

After diving into the resources provided by Angular.io and the Git Docs for AngularFire2, I decided to experiment with a more efficient approach. It seems that creating a service is recommended when working with the same data across different components in ...

Utilizing UseRef in Typescript for an Idle Timer

Feeling frustrated with Typescript, everything seems unnecessarily complicated. Trying to follow a tutorial on react-idle-timer and encountering TypeScript compilation issues within minutes. The guides online suggest using when calling useRef with TypeS ...

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

When trying to display either a confirm or cancel button based on a boolean set in my component.ts, I implemented the following code in my HTML: <mat-dialog-actions class="dialog-actions"> <button class="cancel-btn" ...

Each time the Angular children component is reloaded, the user is redirected to localhost:4200

In my Angular project, I encounter an issue with route parameters in children components. While navigating to these child components from the parent is seamless, reloading the child component causes the application to redirect to localhost:4200 and display ...

What is the best way for a function to accommodate various types that adhere to an interface?

How can we create a function that can accept multiple types with a common interface? Let's consider the example: interface A {a: number} type B = {b: string;} & A type C = {c: string;} & A function acceptA(a: A) { return a } acceptA({a ...

Retrieving the value from the series object and showing it in the tooltip of a high chart with the help of Angular 4

I have successfully implemented the display of x and y values in the tooltip of a Highchart within my Angular 4 application. By utilizing the formatter function of the tooltip, I am able to achieve this functionality. The graphdata array is initially set w ...

Testing Angular combineLatest with Jest

I'm encountering a challenge in an assessment involving a complex Statement related to combineLatest. Here is the snippet of code: component: export class ErinnerungenErinnerungenComponent implements OnInit, OnDestroy { ... erinnerungen: Erinne ...

Issue with tooltip not displaying attribute data-bs-title in Angular 17 with Bootstrap version 5.3

I am currently developing an Angular version 17 application and implementing a dynamic tooltip feature. The tooltip content will be supplied through a @Input() into the component. While a static tooltip works fine, I am facing an issue when trying to make ...

Tips for preserving user information after logging in with firebase authentication

Currently, I have implemented Firebase Authentication in my Angular application to enable users to log in. Here is the login() function within my AuthService: login(email: string, password: string) { return from(firebase.auth().signInWithEmailAndPassw ...