Question

我尝试使用对象列表创建下拉列表。由于下拉列表包括其他选项，因此无法与阵列进行双向绑定。在选择时我想将对象传递给组件，但是目前我只能传递显示值。

这是我的模板：

    <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>

并在组件中运行：

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

这导致＆＃34;项目描述＆＃34;而不是{＆＃39; id＆＃39;：4，......我该如何更改？

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);
}

你可以尝试这个想法。

Answer 2

[(ngModel)]属性是[ngModel]和(ngModelChange)的快捷方式。

实施例

[(ngModel)]="foo"

相当于

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

请注意$event是从组件发出的更改。

因此，在您的情况下，您希望在(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>

如何从＆＃34中选择对象;选择＆＃34;在Angular2中没有双向数据绑定

3 个答案: