Unable to display data in multi select drop down Angular 6

Question

I am using this multiselect library https://www.npmjs.com/package/ng-multiselect-dropdown in Angular v6.

I am trying to display my list in multiSelect, but the drop down is showing me "No data available"

If I hardcode my response as follows then the list is populating fine. I cannot understand what is wrong. Why is my response not working, but if I hardcode it then works fine?

this.members = [
  {
    "item_id": "user1@gmail.com",
    "item_text": " User 1"
  },
  {
    "item_id": "user2@gmail.com",
    "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.getMembers();

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

  }
  getMembers() {
    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

Changed my method as follow but did not work either.

  getMembers() {
    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))
      });
  }

Answer 1

UPDATE:

The main issue is the fact that the select component expects a value of type {item_id:number, item_text:string}[] for the data property, but you are mapping the data in the subscribe callback in a wrong way.

Notice that you are pushing objects into the members array whose properties item_id and item_text are the elements of the data array being iterated in the subscribe callback.

Instead of:

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

You should have

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

You could easily avoid this kind of issues by being more explicit about the types of your instance members. For example:

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:

Most likely your issue is related to the fact that you mutate the members array. The select component has onPush change detection, which re ensures my guess.

Try setting the members array with a new value instead of mutating it. You can do this by refactoring your code to use map instead of forEach inside of the subscribe callback, as follows:

this.members = data