Angular: Change option list in select dynamically

Question

I have 2 selects filled with 2 object arrays in a modal:

<select class="browser-default" id="gebied" 
  [(ngModel)]="filteredGebied" 
  (ngModelChange)="onChange($event)">
    <option *ngFor="let gebied of list1" 
      value="{{gebied.id}}">{{gebied.beschrijving}}</option>
</select>

<select class="browser-default" id="domein" [(ngModel)]="filteredDomein">
  <option *ngFor="let domein of list2"
    value="{{domein.id}}">{{domein.beschrijving}}</option>
</select>

Now I want to change the items from the second select (list2) based on the selected item from list1.

onChange(list1Id){ 
...
this.list2 = ...
}

Problem is my select options in the second select (list2) don't change.

Sometimes I get the following error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngForOf:

How can I fix this all?

Taher · Accepted Answer · 2019-02-07 15:29:45Z

1

It should really work. Here I check for example if a is selected, that means according to your binding filteredGebied is 1 then list2 must change!

  export class AppComponent {
      list1 = [{ id: '1', beschrijving: 'a' }, { id: '2', beschrijving: 'b' }];
      list2 = [{ id: '1', beschrijving: 'aaa' }, { id: '2', beschrijving: 'bbbb' }];
      filteredGebied;
      filteredDomein;

      onChange(event) {
      if (this.filteredGebied === '1') {
        this.list2 = [{ id: '1', beschrijving: 'xxx' }, { id: '2', beschrijving: 'yyyy' }];
      }
     }
   }

answered Feb 7, 2019 at 15:29

Taher

2683 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niels · Accepted Answer · 2019-02-08 08:38:38Z

0

Apperently it works if I don't populate the second select on startup. But that's not a problem for my application.

edited Feb 8, 2019 at 8:38

answered Feb 8, 2019 at 7:44

Niels

4265 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular: Change option list in select dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related