43

我知道有人问过类似的问题，但我没有找到一个好的答案。我想在 Angular 表单中创建一个选择列表，其中每个选项的值都是一个对象。另外，我不想使用 2 路数据绑定。例如，如果我的组件有这些字段：

    l 用户：任何[] = [
        { 姓名：“比利·威廉姆斯”，性别：“男性”}，
        { 姓名：“Sally Ride”，性别：“女性”}
        ];
    curUser：任何；

我希望我的 HTML 模板包含以下内容：

    <select #selectElem (change)="setNewUser(selectElem.value)">
        <option *ngFor="让 lUsers 的用户" [ngValue]="user">
            {{用户名}}
        </选项>
    </选择>

但是，使用此代码，我的 setNewUser() 函数会接收所选用户的 Name 字段的内容。为什么它选择那个特定的领域，我不知道。我期望它会收到所选选项的“值”，我专门将其设置为用户对象。

请注意，我在选项中使用了 ngValue 而不是 value。这是其他人对 SO 的建议。如果我改用 value，会发生什么情况是对象被转换为字符串 '[Object object]'，这是 setNewUser() 接收的，这是没用的。

仅供参考，我正在使用 angular 4.0.0 和 @angular/cli 1.1.2 在 Windows 10 上工作。这是 setNewUser() 方法：

    setNewUser（用户：用户）：无效{

    控制台.log（用户）；
    this.curUser = 用户；
    } // setNewUser()

我正在确定我的日志记录以及在模板中包含的确切传递给它的内容：<pre>{{curUser}}</pre>

4

6 回答 6

59

我目前正在使用[ngValue]它，它可以很好地存储对象。

可以在此问题(change)中找到有关您使用而不是遇到问题的原因的解释(ngModelChange)

所以，既然你已经使用过[ngValue]，你可能想做这样的事情，你将只使用一种方式绑定，以便能够使用 ngModelChange 指令：

<select (ngModelChange)="setNewUser($event)" (ngModel)="lUsers">
        <option *ngFor="let user of lUsers" [ngValue]="user">
            {{user.Name}}
        </option>
    </select>

并且您的 ts 文件将捕获事件并接收用户对象，而无需通过 id 跟踪它，基本上重用您的旧方法就足够了：

setNewUser(user: User): void {
    console.log(user);
    this.curUser = user;
    }

2020 年 6 月 16 日更新：

始终取决于您的用例，您可能需要在此处使用方括号而不是圆形：(ngModel)="lUsers. 对于 OP 所述的特定情况，圆括号是正确的选择。可以在Angular guru Günter Zöchbauer的这个答案中找到关于方形/圆形和香蕉盒之间区别的清晰详细的描述

于 2018-01-24T16:24:55.723 回答
26

由于标签的value属性option不能存储整个对象，我们将id在lUsers数组中创建一个新属性来跟踪所选项目。

HTML：

<select #selectElem (change)="setNewUser(selectElem.value)">
    <option *ngFor="let user of lUsers" [value]="user.id">
        {{user.Name}}
    </option>
</select>

这会将唯一性传递id给我们的setNewUser函数进行更改。

在您的 component.ts 中：

...

lUsers: any[] = [
    { id: 1, Name: 'Billy Williams', Gender: 'male' },
    { id: 2, Name: 'Sally Ride', Gender: 'female'}
];
curUser: any = this.lUsers[0]; // first will be selected by default by browser

...

setNewUser(id: any): void {
    console.log(id);
    // Match the selected ID with the ID's in array
    this.curUser = this.lUsers.filter(value => value.id === parseInt(id));
    console.log(this.curUser);
}

这是上述代码的plnkr演示。打开您的开发人员工具以查看控制台日志。

于 2017-07-17T06:42:19.107 回答
10

您可以在 -Elements 上使用 [ngValue] 而不是 [value]。这个对我有用。

我在这里找到了这些信息： https ://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/

于 2017-11-20T08:47:05.333 回答
5

Angular 6 只需执行此操作

HTML

<div class="col-3" style="float:left;padding-left: 18px !important;">
      <label>Vehicle No.</label>
      <div *ngIf="gpsDevicesArray && gpsDevicesArray.length > 0">
            <select [ngModel]="selectedVehicle" style="padding: 7px;border-radius: 4px;"
                    (ngModelChange)="onVehicleNumberChange($event)">
                    <option *ngFor=" let device of gpsDevicesArray" [ngValue]="device">
                        {{device.vehicleNumber}}
                    </option>
            </select>
      </div>
</div>

打字稿

// 对于初始值（将此行放在服务器调用函数中）

 this.selectedVehicle = gpsDevicesArray[0];

// 监听器

 onVehicleNumberChange(device) {
        console.log("selectedVehicle ====", device);
 }
于 2019-05-31T07:53:03.220 回答
3

HTML：

<select [formControl]="years">
 <option value="">Select</option>
 <option *ngFor="let year of yearsList" [ngValue]="year">{{year.value}}</option>
</select>

TS：

years = new FormControl('');
yearsList = [{id: 1, value: '2019'}, {id:2, value: '2020'}];

this.years.valueChanges.subscribe((year) => {
 console.log(year)
});

结果： 您将在控制台中获得年份对象:)

于 2020-01-30T09:06:37.883 回答
1

您可以使用 ngModel 和 ngValue

<select [(ngModel)]="curUser ">
    <option *ngFor="let user of lUsers" [ngValue]="user">
        {{user.Name}}
    </option>
</select>
于 2020-08-19T08:59:12.913 回答