Angular 6 presents a challenge in rendering data within the multi select drop down feature

Question

Angular 6 presents a challenge in rendering data within the multi select drop down feature

I am currently utilizing a multi-select library called ng-multiselect-dropdown in my Angular v6 project.

Unfortunately, when I try to display my list using the multiSelect feature, the drop-down shows a message saying "No data available".

I discovered that if I hardcode my response, the list populates correctly. However, I am puzzled as to why my dynamic response is not working properly.

this.members = [
  {
    "item_id": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f2a2c3a2d6e1f38323e3633713c3032">[email protected]</a>",
    "item_text": " User 1"
  },
  {
    "item_id": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f4f2e4f3b3c1e6ece0e8edafe2eeec">[email protected]</a>",
    "item_text": " User 2"
  }]

HTML

<ng-multiselect-dropdown [placeholder]="'Select Member Names'" [data]="members"
                [(ngModel)]="selectedMembers" [settings]="dropdownSettings" (onSelect)="onItemSelect($event)"
                (onDeSelect)="onItemDeSelect($event)">
</ng-multiselect-dropdown>

TS

export class IndividualDashboardComponent implements OnInit {


  selectedMembers: Array<any> = [];
  getIndividualMemberResponse: any;
  statusCode: number;
  members = [];
  dropdownSettings = {};
  constructor(private route: ActivatedRoute, private toastMessageService: NotificationService, private http: HttpService) { }


  ngOnInit(): void {
    this.fetchMembers();

    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 4,
      allowSearchFilter: true
    };

  }
  fetchMembers() {
    let teamName: String = "All";
    let urlString: any = environment.ALL_TEAM_MEMBERS + teamName;
    this.http.getRequest(urlString, null, null)
      .subscribe((data) => {
        (<Array<String>>data).forEach(member => {
          this.members.push({ item_id: member, item_text: member });
        });
        console.log(JSON.stringify(this.members))
      },
        (error: Response) => {
          this.getIndividualMemberResponse = error;
          this.statusCode = this.getIndividualMemberResponse.status;
          this.toastMessageService.errorMessageToast(this.statusCode);
        });
  }


  onItemSelect(item: any) {
    if (this.selectedMembers.length === 0) {
      $('#submitButton').prop('disabled', true);
    } else {
      $('#submitButton').prop('disabled', false);
    }
  }
  onItemDeSelect(item: any) {
    if (this.selectedMembers.length === 0) {
      $('#submitButton').prop('disabled', true);
    } else {
      $('#submitButton').prop('disabled', false);
    }
  }
}

EDITED

I made a change to my method but it did not fix the issue.

  fetchMembers() {
    let urlString: any = environment.ALL_TEAM_MEMBERS + 'All';
    this.http.getRequest(urlString, null, null)
      .subscribe((data) => {
        this.members = 
         (<Array<String>>data).map(member => ({ item_id: member, item_text: member }));
        console.log(JSON.stringify(this.members))
      });
  }

angular dropdown multi-select

Answer 1

Answer №1

UPDATE:

An important issue arises from the requirement that the select component expects a value of type

{item_id:number, item_text:string}[]

for the data property, but it seems that you are incorrectly mapping the data in the subscribe callback.

Please note that you are adding objects to the members array, and these objects have properties item_id and item_text corresponding to the elements in the data array being iterated in the subscribe callback.

Instead of doing this:

this.members.push({ item_id: member, item_text: member });

You should do this:

this.members.push({ item_id: member.item_id, item_text: member.item_text });

To avoid such issues, it is advisable to explicitly declare the types of your instance members. For instance:

interface SelectItem {
  item_id: number;
  item_text: string;
}

export class IndividualDashboardComponent implements OnInit {
   ...
   members: SelectItem[] = [];
   ...

   getMembers(){
     ...
     this.http.getRequest(urlString, null, null)
      .subscribe((data: SelectItem[]) => this.members = data);
     ...
   }
}

ORIGINAL:

The problem likely lies in the fact that you modify the members array. The select component uses onPush change detection, which supports this assumption.

Try replacing the mutation of the members array with assigning a new value to it instead. You can achieve this by refactoring your code to use map instead of forEach inside the subscribe callback, like so:

this.members = data

Answer 2

UPDATE:

An important issue arises from the requirement that the select component expects a value of type

{item_id:number, item_text:string}[]

for the data property, but it seems that you are incorrectly mapping the data in the subscribe callback.

Please note that you are adding objects to the members array, and these objects have properties item_id and item_text corresponding to the elements in the data array being iterated in the subscribe callback.

Instead of doing this:

this.members.push({ item_id: member, item_text: member });

You should do this:

this.members.push({ item_id: member.item_id, item_text: member.item_text });

To avoid such issues, it is advisable to explicitly declare the types of your instance members. For instance:

interface SelectItem {
  item_id: number;
  item_text: string;
}

export class IndividualDashboardComponent implements OnInit {
   ...
   members: SelectItem[] = [];
   ...

   getMembers(){
     ...
     this.http.getRequest(urlString, null, null)
      .subscribe((data: SelectItem[]) => this.members = data);
     ...
   }
}

ORIGINAL:

The problem likely lies in the fact that you modify the members array. The select component uses onPush change detection, which supports this assumption.

Try replacing the mutation of the members array with assigning a new value to it instead. You can achieve this by refactoring your code to use map instead of forEach inside the subscribe callback, like so:

this.members = data

Angular 6 presents a challenge in rendering data within the multi select drop down feature

Answer №1

Similar questions

Issue: Unable to locate the name 'ContactField' in Ionic 2

Link a template to a formly field when clicking on another field within an Angular formly form

Incorporate a background image into mat-dialog

ng2 - Comparing DevExtreme and Telerik Kendo UI

The predicament with arranging arrays

Is there a way to execute a javascript function that is located outside of my Angular application without having to import it?

Angular displays RouterLink as regular text

What is the best way to remove all validators from a different component in Angular 7 using reactive forms?

Troubleshooting: Issues with MagicSuggest's dependent multiple dropdown functionality

Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

Unleashing the power of RXJS: Leveraging IntervalObservable coupled with the

Encountered CORS error when attempting to access the dynamic menu API after logging

How to instantiate an object in Angular 4 without any parameters

What exactly is the concept behind the Strategy OnPush?

Angular: Creating an instance of a class with StaticProvider passed as a parameter

Sharing data between two components in Angular 7

Discover the method of sending individual row data to a component using *ngFor in Angular 4

Instructions for disabling editing for a specific cell within an inline editable row in primeNG

Transmit information from an Angular application to a Spring Boot server using a POST request

Developing in Angular 2: Enhancing JSON data before passing it to the template