Tips for passing multiple items for the onselect event in a ng-multiselect-dropdown

I've got a multi-select dropdown with a long list of options. Currently, when I choose a single item, it triggers the Onselect event and adds data from the newArrayAfterProjectFilter array to the myDataList based on certain conditions in the OnselectErp function. However, I need to figure out how to select multiple items from the dropdown and have each one trigger the OnselectErp function individually, rather than only processing the last selected item.

Does anyone know the correct way to achieve this?

<ng-multiselect-dropdown *ngIf="showDropDown"
 [placeholder]="'Erp Rfq Number'" [data]="dropdown_Erp"
 [settings]="dropdownSettings" (onSelect)="OnselectErp($event)">
</ng-multiselect-dropdown>
OnselectErp(item: any) {
    this.myDataList = [];
    this.newArrayAfterProjectFilter.forEach(element => {
      if (element.properties.map.aclrq_rfqNum == item.item_text) {
        this.myDataList.push(element);
      }
    });
    console.log(this.myDataList)
  }

Answer №1

To accurately address your issue and provide a comprehensive solution, I would require additional information. However, you can attempt the following steps:

Insert

[(ngModel)]="selectedItems"
in your HTML file and add the selectedItems property in the corresponding component.ts file.

<ng-multiselect-dropdown *ngIf="showDropDown"
 [placeholder]="'Erp Rfq Number'" [data]="dropdown_Erp"
 [settings]="dropdownSettings" (onSelect)="OnselectErp($event)" 
 [(ngModel)]="selectedItems">
</ng-multiselect-dropdown>

Create a button on the user interface and trigger the following function upon click:

filter() {
     this.myDataList = this.newArrayAfterProjectFilter.filter(element => 
      this.selectedItems.some(item=> element.properties.map.aclrq_rfqNum == item.item_text));
    console.log(this.myDataList)
  }

Although untested, the solution should function with minimal to no modifications required.

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

What is the method to modify the starting point of the animation for the material component "mat-progress-bar" so it initiates from 0 instead of 100

I recently integrated a material progress bar into my Angular project. Here is the code snippet: <mat-progress-bar mode="determinate" value="40"></mat-progress-bar> However, I encountered an issue where upon page refresh, ...

Empty css file detected during gulp processing

My Gulp task is saving the CSS file with a size of 0kb. Here is the code snippet: Link to the code gulp.task('jpg', function () { gulp.src('./template/img/**/*.*') .pipe(changed('./dist/img/')) ...

Attempting to retrieve the value from a nested table within a table row using Jquery

<tr role="row" class="odd"> <td style="background-color:white"> <table> <tbody> <tr data-row-id="22"> <td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22">< ...

Encountering difficulties in accessing state while utilizing async callback functions in React.js

After finding this function on Stack Overflow, I decided to use it in order to update a database and profile information immediately after a user signs up. The function is working as expected, but I am encountering an issue where I can no longer access the ...

"Encountering a halt in my Node.js Application as it waits endlessly

I'm currently following a tutorial on creating a collaborative canvas drawing application using Node.js and Socket.io. I've included the source file below which is used to create the server. However, when I try to open it in my browser, it gets s ...

Issue with Angular date field not displaying invalid input when form is submitted

I am encountering an issue with my simple form that contains only one date control. Whenever I input an invalid date like 30-Feb-2018, the control becomes invalid and my CSS style triggers a red border to indicate the error. The problem arises when the us ...

Discover the wonders of utilizing @blur events on your custom Vue components!

Trying to create a customized component that mimics an input field with validation, I'm encountering issues with getting @Change, @blur, and other events to function properly as they would on a standard input field. This is the structure of my custom ...

Merge two RxJS Observables/Subscriptions and loop through their data

Working with Angular (Version 7) and RxJS, I am making two API calls which return observables that I subscribe to. Now, the challenge is combining these subscriptions as the data from both observables are interdependent. This is necessary to implement cer ...

Using Jquery and Ajax to add information to a database

One of the challenges I'm facing involves a page with three forms, each containing separate variables that need to be inserted into a MySQL database for viewing. My current script is working fine, even though I am aware that `mySql_` is deprecated but ...

Issue with vue-apollo package causing GraphQL query not to display on the frontend

Currently, I am expanding my knowledge of GraphQL and working on a project where I aim to display queries in the front end. To achieve this, I have incorporated the package GitHub - Akryum/vue-apollo: ...

Storing jQuery output in a global variable can be achieved by assigning the result

Take a look at the Code snippet below - $(function() { $.fn.getPosition = function() { var results = $(this).position(); results.right = results.left + $(this).width(); results.bottom = results.top + $(this).height(); return results; } ...

Iterate through an array containing objects that may have optional properties, ensuring to loop through the entire

I need help iterating through an array of objects with a specific interface structure: export interface Incident { ID: string; userName1?: string; userName2?: string; userPhoneNumber?: string; crashSeverity: number; crashTime: number; } Here ...

The creation of the Angular project was unsuccessful, with the error message "npm ERR! path AngularappTwo ode_modulesacorninacorn" causing the issue

These are the steps I took to create my first Angular application: First, I installed NodeJS Next, I installed VSCode I then checked my NodeJS and npm versions https://i.stack.imgur.com/lj6pI.png After that, I ran the command npm install -g @angular/c ...

JavaScript code to convert a query into an array

Is there a way to search through a JavaScript array to find all names that start with the letter A? If so, how can I display all of the information associated with those names? Name":"Albert","age":"14" Name":"Alison","age":"14" Here is my JSON array: ...

Unable to retrieve dropdown value using JavaScript and display it in a div

javaScript code: Retrieving data from a dropdown and displaying it in the inner HTML of a div. function showcost() { var days = document.getElementById("Ddays"); var Dudays = days.options[days.selectedIndex].text; var div = docu ...

React Router consistently displaying IndexRoute

This is the main file for my app: import React from 'react'; import { render } from 'react-dom'; import { browserHistory, Router, Route, IndexRoute } from 'react-router'; // Components import Main from './components/cor ...

I encounter obstacles when trying to execute various tasks through npm, such as downloading packages

Currently, I am facing an issue while trying to set up backend development using node.js on my personal computer. The problem lies with the npm command as it is not functioning correctly. Despite successfully installing a file without any errors, I am unab ...

Charting Add-Ons for jQuery

Looking for suggestions on user-friendly graph drawing plugins compatible with jQuery. Currently developing a web application that will retrieve data from a remote database and present it through visual graphs... Explored jgcharts (the jQuery Google Chart ...

Having trouble navigating the dependency graph: Unable to locate module './crypto_auth' in sodium-universal

Encountering the following error while trying to browserify a node project from https://github.com/datproject/sdk: Error: Can't walk dependency graph: Cannot find module './crypto_auth' from 'C:\myPath\node_modules\sodium ...

Struggling to properly implement background images in a React application using Tailwind CSS

I'm currently developing a React application using Tailwind CSS for styling. In my project, I have an array of items called "trending," and I'm attempting to iterate through them to generate a series of divs with background images. However, I am ...