How to bind multiple options/select in Angular 4

Question

I'll try my best to explain my scenario. I have a search filter which works when used in the following format in Angular 4:

<select [(ngModel)]="city_filter" (change)="applyFilter('city',$event.target.value)">
  <option value="Ahmedabad">Ahmedabad</option>
  <option value="Bangalore">Bangalore</option>
  <option value="Bengaluru">Bengaluru</option>
  <option value="Delhi">Delhi</option>
  <option value="Dilli">Dilli</option>
</select>

It stops working when I try the method:

   <select [(ngModel)]="city_filter" (change)="applyFilter('city',$event.target.value)">
      <option value="Ahmedabad">Ahmedabad</option>
      <option value="Bangalore/Bengaluru">Bangalore/Bengaluru</option>
      <option value="Delhi/Dilli">Delhi/Dilli</option>
    </select>

How do I make this work so that the filter works for both Bangalore/Bengaluru?

In the applyFilter, this is the function:

applyFilter (key: string, value) {
    this.filter.set(key, value);
    if (value === 'null') {
      this.filter.delete(key);
    }
    let p = new HttpParams();
    this.filter.forEach((v, k) => {
      p = p.append(k, v);
    });
    this.loading = true;
    this.jobService.searchJob(p).subscribe(res => {
      this.loading = false;
      this.valueStack = res;
      this.jobs = res.jobs || [];
    }, err => {
      this.loading = false;
      this.jobs = [];
    });
  }

you are missing a quotation at the end of your `ngModel`. I assume this was just an accident though because neither of these code scenarios would work for you then. — bitW0lf, Jun 01 '18 at 05:26
Can you post what your'e doing in your `applyFilter` function? I don't see anything wrong with this html. — bitW0lf, Jun 01 '18 at 05:31
The set and delete operations do not like the fact that you have this character in the value you are passing in `/`. The person below mentions this. Try what they're saying, I won't bother adding another answer that says the same. — bitW0lf, Jun 01 '18 at 05:45

score 1 · Answer 1 · answered Jun 01 '18 at 05:43

1

Instead of this

 <option value="Bangalore/Bengaluru">Bangalore/Bengaluru</option>

Try this

 <option [ngValue]="'Bangalore' || 'Bengaluru'">Bangalore/Bengaluru</option>

answered Jun 01 '18 at 05:43

kzrfaisal

1,355
5
15
26

How to bind multiple options/select in Angular 4

1 Answers1