What is the reason for the array not being altered?

There exists a service that handles the list data using `set/get` methods:

@Injectable()
export class ListService {
    private items: any[] = [];

    getItems() {
        return this.items;
    }

    setItems<T>(items: T[]): T[] {
        this.items = [...items];
        return this.items;
    }

    setSelected(value: any): void {
        value.selected = !value.selected;
    }

    setSelectedState(value: any, state: boolean): void {
        value.selected = state;
    }

    drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(this.items, event.previousIndex, event.currentIndex);
    }

    emitChnages(): void {
        this.onChanged.next(this.items);
    }
}

I utilize this service within a component, where I assign the input variable `packet` to `this.listService.setItems()`:

export class SignComponent implements OnInit {
   @Input() packet: any;
   public copysogllist: any[] = [];
   ngOnInit() {
        this.copysogllist = this.listService.setItems(this.packet.sogllist);
    }

       public drop(event: CdkDragDrop<string[]>): void {
         this.listService.drop(event);
        
    }
}

Why is it that when I invoke `this.listService.drop(event);`, the array `this.copysogllist` does not get updated?

Answer №1

 simply create a function like this

handleDrop(event: CdkDragDrop<string[]>) {
        moveItemInArray(this.items, event.previousIndex, event.currentIndex);

     return this.items
    }
    
and in your Angular component

public handleDrop(event: CdkDragDrop<string[]>): void {
         this.updatedList = this.listService.handleDrop(event);
        
    }

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

When I pass the setState function as props with a specified type, I still encounter a type error

https://codesandbox.io/s/beautiful-ishizaka-140bq4?file=/src/App.tsx Encountering an issue when passing props to the TagInput component. SetStateAction<Props[]> is unable to be assigned to string[] No errors are found in TagInput.tsx. Please revi ...

Tips on transferring a value from one JavaScript file to another JavaScript file

Currently, I am able to pass parameters from one JavaScript file to another using the jQuery method "$.getScript". For example, in the "secondJavaScript.js" file, I use a $.getScript call to invoke the function callMemoPage() from "firstJavaScript.js", p ...

transfer to a different outlet when needing to circle back earlier

I'm currently working on implementing validation in a form, and one of the needed validations involves retrieving a value from an input field and checking its existence on the server or in a JSON file. However, there seems to be a problem where even ...

Employing a dynamic array within a module

Having some trouble using a reactive array in my component. It seems to work fine with an object, but when it comes to an array of objects, the view doesn't update as expected. Any suggestions on how to ensure the view gets updated when the array is ...

Angular component unable to retrieve array data from Angular service

I've developed an Angular service that serves as a middleman for fetching data from a database. Here's the code: export class WebService { constructor(private http: Http, private datePipe: DatePipe) { this.getStatsbyDate(this.datePipe.transf ...

Is there a way to successfully submit multiple locations, each separated by commas, through the multipart form?

Here is my HTML form: <form method="POST" enctype="multipart/form-data" v-on:submit.prevent="handelSubmit($event);"> <div class="clear"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="form ...

Guide to inserting multiple lines within a DIV element with the help of JQuery

I need to conditionally add the following script to my page: <!-- Google Code for Greenwich UC Page Visits Conversion Page --> <script type="text/javascript"> /* <![CDATA[ */ var google_conversion_id = 659; var google_conversion_language = ...

Dividing a string in JavaScript to generate fresh arrays

I am currently dealing with the following string: "ITEM1","ITEM2","ITEM3","ITEM4","ITEM5","ITEM6","ITEM7"~100000000,1000048,0010041,1,1,1,1~100000001,1000050,,2,0,2,1~100000002,1068832,0 ...

What is the process for setting up a Discord channel exclusively for media with a bot? (Using JavaScript)

Seeking guidance on coding my Discord Bot (Js) to only delete text messages in a specific channel, while preserving images and videos. Does anyone have suggestions on how this can be achieved? ...

What are the reasons behind the lack of clarity in the cache for an ajax request

I am encountering an issue with my external JavaScript file that is supposed to run the home.php file using an Ajax request. Despite adding a random function to the URL to clear the cache, I am still facing issues with caching in my code. Below is the Ja ...

How can Puppeteer be configured to replicate the exact layout of an HTML document for PDF generation, including page breaks?

Currently, I am utilizing Puppeteer in order to create PDF files by using static HTML as the primary source: const page = await browser.newPage(); await page.setContent(html); //the HTML content is retrieved from the file system const pdf = await page.pdf ...

Utilize Javascript to Populate Form Fields Based on "Selected Name"

I am currently facing a challenge in using javascript to automatically populate a form, specifically when it comes to setting the value for the country field. <form action="/payment" method="post" novalidate=""> <div class="input_group"> ...

What is the best way to transform a JSON string into an array containing objects in JavaScript?

I need help transforming the following JSON string into an array: [{id: "1", type: "railroadCrossingSign", latitude: "55.647432", longtitude: "12.187673"}, {id: "2", type: "stationSign", latitude: "55.647444", longtitude: "12.187545"}] When trying to use ...

The mystery of a JQuery response that remains elusive

Despite my best efforts, I've been struggling for hours with what seems like a simple and well-documented task. All I want to do is retrieve the result of a $.getJSON query without appending it to a div. While I can successfully alert the result withi ...

Extracting specific key-value pairs from JSON data

Working with JSON data, I encountered a need to pass only specific key-value pairs as data to a component. Initially, I resorted to using the delete method to remove unwanted key-value pairs, which did the job but left me feeling unsatisfied. What I truly ...

Is it possible for a jQuery ajaxSuccess function to detect an AJAX event in a separate JavaScript file? If it is, what steps am I missing?

I've been attempting to initiate a function following an ajax event. I have been informed that despite the ajax event occurring in a different file (on the same server, if that makes a difference) and that the file is javascript, not jquery, "Ajaxsucc ...

Mix up your elements by having some inline and others block, all based on their neighboring elements

In my project, I am working on showcasing a list of 'input' and 'textarea' elements within a flex box arrangement. Each element needs to have a width set to 45% of the flex box. One challenging issue that arises is the following: I am s ...

Enhance Vaadin 14: Automatically adjust TextArea size when window is resized

Using Vaadin 14.1.19 in a project called "My Starter Project," I attempted to create a TextArea that supports multiple lines. Initially, everything seemed fine, but upon resizing the TextArea, it failed to adjust the number of visible lines. Here is the co ...

The Node.js Express undefined callback function is causing issues

I'm currently working on a personal project and I don't have much experience with nodeJS. My goal is to retrieve remote JSON data, generate statistics based on that data, and display it. However, I am encountering some issues with the callback fu ...

How can one effectively replace or upgrade Service Workers in a live environment?

I have an Angular Progressive Web App (PWA) currently in production that is utilizing the sw-precache service worker. This was implemented before the availability of Angular's @angular/pwa package. If I were to transition to using the Angular service ...