ng-select issue: list not refreshing

I am encountering an issue with the method below that updates the modules array. Even though the console displays the result correctly, the ng-select does not update the list accordingly. I attempted to use this.modules=[...elements], but it did not work either.

public updateModules(event) {
   this.moduleService.retrieveModulesByLevel(this.form.get("levels").value).subscribe((data: any[]) => {
      let elements = data.filter(module => module.assignClasses.some(item => event.map(el => el.classId).includes(item.classs.classId)));
      this.modules = elements;
      console.log(this.modules);
   })
}

<ng-select [items]="modules" formControlName="module" bindLabel="designation" bindValue="moduleId"></ng-select>

Answer №1

Utilize ChangeDetectorRef.

Within the @Component directive, include

changeDetection: ChangeDetectionStrategy.Default
. For example:

@Component({
    selector: 'your-selector',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.scss'],
    changeDetection: ChangeDetectionStrategy.Default
})

In the constructor of the component, add

constructor(private cdRef: ChangeDetectorRef) // alongside your other dependencies

In the onChangeClass method, add

this.cdRef.detectChanges();

after this.modules = elements;

Following these steps should resolve the issue.

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

React Router Issue: Component Not Rendering When <nav> Element Is Incomplete

I am currently experiencing an issue with rendering a component in my React TypeScript application using React Router. The problem arises when trying to navigate to the AddTask component by clicking on a link within a <nav> element. Strangely, the co ...

Managing the activation and deactivation of a form based on value modifications

I have a formgroup with interconnected formcontrols where each control is enabled only if the previous one is filled. Additionally, if a control is cleared, all subsequent controls should also be cleared and disabled. To illustrate this use case, I create ...

Get a single object from an array with .single method provided by @ngrx

Seeking to retrieve an Observable containing a single object from an array of objects in my store. I aim to utilize the .single operator, which should throw an exception if there is not exactly 1 object present. However, I'm struggling with this as my ...

Tips on effectively transferring formarray to another component

I'm attempting to pass a formarray to a child component in order to display the values within the formarray there. Here is my current code, but I am struggling to figure out how to show the formarray values in the child component. app.component.html ...

Fill up the table using JSON information and dynamic columns

Below is a snippet of JSON data: { "languageKeys": [{ "id": 1, "project": null, "key": "GENERIC.WELCOME", "languageStrings": [{ "id": 1, "content": "Welcome", "language": { ...

Refresh a Google chart without having to reload the entire page

I currently have a button that allows me to refresh the data on my page in case there is new data available through an API. Although this button successfully refreshes my datatable, it does not redraw the Google charts I have integrated into my project usi ...

Utilizing Dynamic Class Names in Angular 7 with Typescript

In the process of developing an Angular 7 application, I have created a form component that is intended to be used for various entities. As part of this, I defined a variable route: {path: ':entity/create', component: FormComponent} While this ...

Cancelling an ongoing AWS S3 upload with Angular 2/Javascript on button click

I'm currently working with Angular 2 and I have successfully implemented an S3 upload feature using the AWS S3 SDK in JavaScript. However, I am now facing a challenge: how can I cancel the upload if a user clicks on a button? I've attempted the ...

To emphasize the chosen item following a component's update

SCENARIO: A component named list is used to display a list of all customers. The conditions are as follows: 1) By default, the first list-item (e.g. customer 1) is selected and emitted to another component called display. 2) When any other list-item (i.e ...

Using Typescript to replicate Object.defineProperties

Is there a way to emulate Object.defineProperties from JavaScript in Typescript? I am interested in achieving something similar using the syntax of Typescript: Object.defineProperties(someObject.prototype, { property: {get: function() { return v ...

Is there a surefire method to ensure that ChromeDriver in Protractor consistently uses the stable version?

Every time Chrome releases an update, I encounter a recurring issue. Allow me to paint the picture: All browsers are at version 83 of Chrome Chrome announces that version 84 is on its way, but it has not been released yet. A new ChromeDriver 84 is rolled ...

Utilizing separately generated elements from ngFor

I am currently working with an angular2 component that generates a list of chapters using an *ngFor= tag. However, I am facing an issue where I am unable to individually target these chapters in my ng2 component to highlight the selected chapter. I expecte ...

The create document feature seems to be malfunctioning for some reason. Any ideas why it's not working properly in Firebase with Angular

I've been attempting to submit user data to the Firebase Firestore database, but I'm experiencing issues with the function that is supposed to create a new collection. Despite trying different methods, none of them seem to be working for me. I ha ...

Transform an Angular 2 application to seamlessly incorporate an SDK

I have been working on an Angular 2 application and I am curious if it is feasible to transform this into an SDK that can be easily integrated into other applications by simply adding script tags in their headers. If this conversion is not achievable, co ...

The ActivatedRoute snapshot does not function properly when used in the TypeScript class constructor

Currently, I am encountering a challenge with TypeScript and Angular 2. The structure of my TS class is as follows: 'import { Component, OnInit } from '@angular/core'; import {ActivatedRoute} from '@angular/router'; @Component({ ...

Ways to simulate objects in jest

I'm facing an issue while trying to mock a function of an object using Jest and Typescript. Below is a concise version of my code: // myModule.ts export const Foo = { doSomething: () => { // ... does something console.log('original ...

What is the best way to extract items from another array that have approved IDs - is it through using map(), filter(),

I am unsure about the best approach to retrieve only the items (array with objects) that have been approved based on their id. Should I start by using map() and then filter(), or should I filter() them first and then map()? export class AppComponent { ...

Page Breaks - Patience in anticipation of dataSource readiness

I am facing an issue with my pagination service and component. The dataSource appears empty when the page is loaded for the first time, but by the second time it is populated and I can display the dataTable and paginate successfully. Is there a workaround ...

The Auth0 callback function is functioning properly in the development environment of my Angular 2 (4) application

While testing my Angular 4 login with Auth0 in development mode using localhost:4000/callback as the redirectUri for my auth0.WebAuth, everything works smoothly. However, when transitioning to production and changing the redirectUri = https://example.com/ ...

Modify the selection in one dropdown menu based on the selection in another dropdown menu using Angular 8

When I have two dropdowns, I aim to update the second dropdown with a matching JSON object based on the value selected in the first dropdown. JSON this.dropdownValues = { "mysql 8": { "flavor": [ "medium", ...