CODEWITHSUNDEEP
javascriptangulartypescriptngx-select-dropdown
OPunktSchmidt
OPunktSchmidt

Reputation: 721

Angular ngx-select-dropdown: dropdown options not updating

I am new to angular so it can be quite a simple problem. I'm using ngx-select-dropdown (a dropdown control). There are two dropdown controls on the page and when the first dropdown changes, the second dropdown should update the dropdown options.

The new dropdown options are properly downloaded via a rest api. My problem is that the user interface is not updated. When i add the dropdown options in ngOnInit it works. But when i add them later, it does not work.

This would work:

  ngOnInit() {

    this.apiService.getAllActivities().subscribe(response => {
      this.activities = response;
      this.activityDropDownOptions = response;
    });
  }

This not:

  activityDropDownSelectionChanged(event: any) {

    this.questionnaireDropDownOptions = []

    for (let activity of event.value) {
      this.apiService.getActivity(activity.id).subscribe(response => {

        for (let organisationalUnitQuestionnaire of response.organisationalUnitQuestionnaires) {
          this.questionnaireDropDownOptions.push(organisationalUnitQuestionnaire);
        }
      });
    }
  }

HTML Page:

   <form #searchForm="ngForm" id="searchForm" name="searchForm" (ngSubmit)="search()">

            <b>Aktion/ Projekt:</b>
            <div class="form-group">
              <label for="activityDropDown" class="mt-2">Aktion / Projekt:</label>
              <ngx-select-dropdown name="activityDropDown" id="activityDropDown" [multiple]="true" [(value)]="activityDropDownModel" [config]="activityDropDownConfig" [options]="activityDropDownOptions"
                                   (change)="activityDropDownSelectionChanged($event)"></ngx-select-dropdown>

              <label class="mt-2" for="visitPeriodInput">Besuchszeitraum Von / Bis:</label>
              <input name="visitPeriodInput" id="visitPeriodInput" type="text" autocomplete="off" placeholder="Keine Einschränkung ausgewählt" class="form-control"
                     bsDaterangepicker [bsConfig]="{ dateInputFormat: 'MM/DD/YYYY' }" [(ngModel)]="searchFormModel.visitPeriod">
            </div>

            <b>Fragebogen / Fragen</b>
            <div class="form-group">

              <label for="questionnaireDropDown" class="mt-2">Fragebogen:</label>
              <ngx-select-dropdown name="questionnaireDropDown" id="questionnaireDropDown" [multiple]="true" [(value)]="questionnaireDropDownModel" [config]="questionnaireDropDownConfig" [options]="questionnaireDropDownOptions"></ngx-select-dropdown>

              <label for="questionTextInput" class="mt-2">Fragetext beinhalt:</label>
              <input type="text" placeholder="Keine Einschränkung angegeben" class="form-control" name="questionTextInput" id="questionTextInput" [(ngModel)]="searchFormModel.questionText" autocomplete="off">

            </div>


          </form>

Upvotes: 1

Views: 3464

Answers (1)

Avi Mistry
Avi Mistry

Reputation: 21

You should write like below

this.questionnaireDropDownOptions = [...this.questionnaireDropDownOptions, organisationalUnitQuestionnaire];

Instead of this

this.questionnaireDropDownOptions.push(organisationalUnitQuestionnaire);

Upvotes: 2

Related Questions