Dropdown not checking if the value already has been selected

[Hofkey]

Angular version: @angular/cdk 8.2.3 @angular/cli 8.3.9 @angular/material 8.2.3

ng-multiselect-dropdown version: 0.2.10

Description of issue: The data I am using for this dropdown is coming from an API through an angular service. This service will get a task and a list of contacts who can be assigned to this task. The service will populate one list with contacts and then the code will populate another with contacts which already have been selected.

Steps to reproduce:

1. Create a component that will have some sort of form in it
2. Apply the multiselect dropdown pointing to the two lists as described above. the list containing all contacts will be used for the data property and the selected list will be used for the ngModel property.
3. create a service that will get a list of contacts from an API source. (to test this you could just return a hardcoded list)

Expected result: The list will show the contacts and it will also show which contact has already been selected.

Actual result: The list will show the contacts, which works fine, and it will also show which contact has already been selected, which doesn't work till now.

Demo: I don't know how to include this since the API is not public and I will not include sensitive user data to test this API as it is company policy.

Any relevant code:

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MatBottomSheet, MAT_DIALOG_DATA, MatFormFieldModule,
  MatInputModule } from '@angular/material';
import { KlantdialogService } from 'src/app/services/klantdialog.service';
import { PersoonService } from 'src/app/services/persoon.service';
import { Taak } from 'src/app/models/taak';
import { WerknemerService } from 'src/app/services/werknemer.service';
import { FormControl, FormGroup } from '@angular/forms';
import { IDropdownSettings } from 'ng-multiselect-dropdown';

@Component({
  selector: 'app-taakdialog',
  templateUrl: './taakdialog.component.html',
  styleUrls: ['./taakdialog.component.css']
})
export class TaakdialogComponent implements OnInit {
  taak: Taak;
  persoon: number;
  contactpersonen: any[];
  selectedPersonen: any[] = [];
  dropdownSettings = {};

  constructor(public dialogRef: MatDialogRef<TaakdialogComponent>,
              private bottomsheet: MatBottomSheet,
              private klantenservice: KlantdialogService,
              private persoonservice: PersoonService,
              private werknemerservice: WerknemerService,
              @Inject(MAT_DIALOG_DATA) public data: any) {
                console.log(data);
                if (data.taak) {
                  this.taak = data.taak;
                } else {
                  this.taak = new Taak();
                }
                this.persoon = data.persoon;
               }

  ngOnInit() {
    this.werknemerservice.getContactPersonen().then(d => {
      this.contactpersonen = d;
      this.contactpersonen.forEach(element => {
        if  (this.taak.personen.includes(element.key)) {
          this.selectedPersonen.push(element);
        }
      });

      this.dropdownSettings = {
        singleSelection: false,
        idField: 'key',
        textField: 'value',
        selectAllText: 'Select All',
        unSelectAllText: 'UnSelect All',
        allowSearchFilter: true
      };
    });
  }

  onNoClick() {
    this.dialogRef.close();
  }

  onSave() {
    this.persoonservice.saveTaak(this.persoon, this.taak).then(data => {
      console.log(data);
      this.dialogRef.close();
    });
  }

  contactSelect($event) {
   this.taak.personen = $event.value;
  }

  onItemSelect(item: any) {
    this.selectedPersonen.push(item)
  }
  onSelectAll(items: any) {
    this.selectedPersonen.push(item)
  }
}

[arimus]

Having the same issue here myself using angular 8.x. The selected items are not showing up as previously selected. I can select items just fine and see the array get populated with the new values, but it doesn't seem to detect the selected values that are pre-populated.

Gonna take a look at the code to see what I see here shortly.

[Hofkey]

Having the same issue here myself using angular 8.x. The selected items are not showing up as previously selected. I can select items just fine and see the array get populated with the new values, but it doesn't seem to detect the selected values that are pre-populated.

Gonna take a look at the code to see what I see here shortly.

Any progress?

[arimus]

Unfortunately, no. I cracked open the code and it looks like it should be functioning as it wrangles the current selected values into it's own ListItem objects, but it's not working as expected. Don't have time to play around with it much more though, so I'm just going to fall back to the PrimeNg component that I've used before:

https://primefaces.org/primeng/showcase/#/multiselect

Sorry I couldn't be of more assistance.

[sacgrover]

Hi @arimus , Can you make a repo with dummy data to reproduce it?

[kaustubh-pandey]

It seems that the item_id is required when pre populating values. A workaround: Template: <ng-multiselect-dropdown ... [data]=dropDownValues [(ngModel)]= itemSelected ...

Typescript: dropDownValues=[{item_id:'1',item_text:'val1'},...]

Make a function to find item_id findItemId(str){ return this.dropDownValues.find((item)=> item.item_text===str).item_id }

Now, when inserting a string val in itemSelected this.itemSelected.push( {item_id: this.findItemId(val),item_text: val} );

[k-siddharatha]

package.json relevant entries "@angular-devkit/build-angular": "^0.800.6", "@angular/cli": "8.0.6", "@angular/compiler-cli": "8.0.0",

"@ng-bootstrap/ng-bootstrap": "^5.1.4", "ng-multiselect-dropdown": "^0.2.10", "jquery": "3.4.1",

html <ng-multiselect-dropdown name="size" [placeholder]="'Size'" [data]="sizes" [disabled]="disabled" [settings]="dropdownSettingsSizes" [(ngModel)]="selsizes" (onSelect)="onItemSelectSize($event)" (onSelectAll)="onSelectAllSize($event)">

ts const items = { id: this.sizes.find(x => x.id === 1).id, name: this.sizes.find(x => x.id === 1).name }; this.onItemSelectSize(items);

onItemSelectSize(item: any) { this.selsizes.push(item); }

still on working. please help

[john-lanticse]

I've also encountered this using Angular 8.x but I've made it work. I think the key here is that you set the variable so that angular's ngModel sees the change. i.e.

selectedItems = []

constructor( ) {
  let initialList = []
  apiCall().then(res => {
    initialList.push({ item_id: res.id, item_text: res.text })
  });
  this.selectedItems = initialList;
}