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

Posted

技术标签:

【中文标题】Angular 4 - 在选择列表中使用对象作为选项值【英文标题】:Angular 4 - using objects for option values in a select list 【发布时间】:2017-12-21 12:53:23 【问题描述】:

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

l 用户:任何[] = [ 姓名:“比利·威廉姆斯”,性别:“男性”, 名称:“Sally Ride”,性别:“女性” ]; curUser:任何;

我希望我的 html 模板包含以下内容:

【问题讨论】:

【参考方案1】:

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

您在使用(change) 而不是(ngModelChange) 时遇到问题的原因可以在this question 中找到

所以,既然您已经使用了[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;
    

2020 年 6 月 16 日更新:

根据您的使用情况,您可能需要在此处使用方括号而不是圆括号:(ngModel)="lUsers。对于 OP 所述的特定情况,圆括号是正确的选择。关于方形/圆形和香蕉盒区别的清晰详细的描述可以在 Angular 大师 Günter Zöchbauer 的这个 answer 中找到

【讨论】:

我必须将其更改为 [ngModel]="lUsers" 才能正常工作【参考方案2】:

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

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 演示。打开您的开发者工具以查看控制台日志。

【讨论】:

OP 的代码和你的代码都没有处理 value 属性。我不确定为什么在您的回答中提到它。此外,OP 尝试使用 ngValue,因此添加解释为什么它们应该绑定到 value 属性会很有用(更好吗?OP 是否使用不正确?...)【参考方案3】:

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

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

【讨论】:

【参考方案4】:

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

【讨论】:

【参考方案5】:

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

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

【讨论】:

【参考方案6】:

你可以使用 ngModel 和 ngValue

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

【讨论】:

这正是公认的答案所说的。你的答案有什么新的?我们需要多少个重复的答案?

以上是关于Angular 4 - 在选择列表中使用对象作为选项值的主要内容,如果未能解决你的问题,请参考以下文章

我应该如何从 Angular-2 的下拉列表中使用多选选项绑定数组

在选择菜单中添加所选项目列表

从以前的组件 Angular 中选择列表中的对象

使用Angular 4根据第一个下拉列表选择第二个下拉列表

如何根据第一个下拉列表的选择过滤第二个下拉列表? - 角

Angular 6 无法从提供的对象中自动选择/绑定下拉列表值