angular2 select option select issue

Question

@Component({
    selector: 'filter',
    template: "<select [(ngModel)]="filterState" (change)="selected()">
<option value="">All</option>
                <option *ngFor="let s of states "   [ngValue]="s">{{ s.label}}</option>
            </select>",
});

export class FilterComponent { 
   private states = [
      {
        value: 'active',
        label: 'Active',
      },
      {
        value: 'done',
        label: 'Done',
      },
      {
        value: 'removed',
        label: 'REMOVED',
      }
    ];

  private filterState         =   '';
  selected() :void {
     //this.filterState is still the initiated value
  }
}

In the above case the "All" option is not shown and also whenever changing the option the ngModel it isn't updated.

Tried with value instead of ngValue , and also tried with a private filterState = 0; but same happens here

Günter Zöchbauer · Accepted Answer · 2016-11-16 16:39:58Z

1

I think you need

[ngValue]=""

instead of mixing value and [ngValue]

[value]="s" won't work because [value] only supports strings but not objects.

answered Nov 16, 2016 at 16:39

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

3 Comments

Niyaz Over a year ago

Still the same problem

Günter Zöchbauer Over a year ago

Can you provide a Plunker that allows to reproduce?

Niyaz Over a year ago

Yes i see the suggested method from you working great in plunker , my code is in angular rc 5 may be that causes , let me check , thanks again

Collectives™ on Stack Overflow

angular2 select option select issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related