Question

我知道有类似的问题已被提出，但我找不到一个好的答案。我想以Angular形式创建一个选择列表，其中每个选项的值是一个对象。另外，我不想使用2路数据绑定。例如如果我的Component包含以下字段：


    lUsers: any[] = [
        { Name: 'Billy Williams', Gender: 'male' },
        { Name: 'Sally Ride', Gender: 'female'}
        ];
    curUser: any;

我希望我的HTML模板包含这个：


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

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

请注意，我在选项中使用了ngValue而不是value。这是通过SO的其他人的建议。如果我使用值代替，那么会发生的事情是对象被转换为字符串'[Object object]'，这是setNewUser（）收到的，这是无用的。

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


    setNewUser(user: User): void {

    console.log(user);
    this.curUser = user;
    } // setNewUser()

我正在确定将我的日志记录传递给它的确切内容，并在模板上包含此内容：<pre>{{curUser}}</pre>

Answer 1

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

可以在this question

中找到使用(change)代替(ngModelChange)遇到问题的原因的说明

所以，既然你已经使用过[ngValue]，你可能想做类似的事情，你只能使用单向绑定才能使用ngModelChange指令：

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

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

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

Answer 2

由于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演示。打开开发人员工具以查看控制台日志。

Answer 3

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

我在此处发现了这些信息：https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/

Answer 4

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

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

Answer 5

您可以使用ngModel和ngValue

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

Answer 6

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>

TYPESCRIPT

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

 this.selectedVehicle = gpsDevicesArray[0];

//侦听器

 onVehicleNumberChange(device) {
        console.log("selectedVehicle ====", device);
 }

Angular 4 - 在选择列表中使用对象作为选项值

6 个答案: