如何在没有双向数据绑定的情况下从Angular2中的“选择”中获取所选对象

Question

I'm trying to create a dropdown with a list of objects. Due to the dropdown including other options it cannot be two-way binded to an array. On selection I want to pass the object to the component, but currently I can only pass the display value.

Here is my template:

    <select (change)="doSomething($event.target.value)">
        <option disabled selected>Please select...</option>
        <option *ngFor="let item of items" [ngValue]="item">{{ item.description }}</option>
        <option [ngValue]="">None of the above</option>
    </select>

And function in the component:

    doSomething(item) {
        console.log(item);
    }

This results in "Item description", rather than {'id': 4, .... how can I change this?

Answer 1

<select [(ngModel)]="selectedValue" (change)="doSomething()">
    <option disabled selected>Please select...</option>
    <option *ngFor="let item of items" [ngValue]="item">{{ item.description }}</option>
    <option [ngValue]="">None of the above</option>
</select>

selectedValue: any;
doSomething() {
    console.log(this.selectedValue);
}

You can try with this idea.

Answer 2

The [(ngModel)] attribute is shortcut of [ngModel] and (ngModelChange) .

Example

[(ngModel)]="foo"

Is equivalent to

[ngModel]="foo" (ngModelChange)="foo = $event"

Note that $event is the change emitted from the component.

So in your case, you want to do something on (ngModelChange)

component.html

(ngModelChange)="doSomething($event)"

component.ts

doSomething(value) {

    console.log(value)

    // If you want to manually "re-bind" the model,
    // you can re-assign it, this will make sure the ui
    // is updated with the new value
    this.foo = value
}

Answer 3

 <select #categoriesCtrl (change)='SelectedValue = categoriesCtrl.value'>
        <option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
      </select>
      <button (click)="getValueFromSelect()">Get value</button>