Ionic 3中如何为select选项添加多个数据属性

嘿，我来帮你搞定这个问题！首先先提个小细节：你给出的userlists是单个对象，但你用了*ngFor循环渲染选项——这应该是个小笔误，得把它改成数组形式才能正常循环，比如：

this.userlists = [
  { "id": 1, "name": "John", "age": 31 },
  // 这里可以继续添加更多用户数据
];

接下来回到核心需求：要在提交表单时同时拿到用户的id和age，其实不用给ion-option额外加属性，直接把整个用户对象绑定到选项的value上就可以了，这样选中后userdtl会存储完整的用户信息，包含你需要的所有字段。

修改后的模板代码如下：

<ion-select [(ngModel)]="userdtl">
  <ion-option *ngFor="let ul of userlists" [value]="ul">{{ul.name}}</ion-option>
</ion-select>

这里用了Angular的属性绑定语法（[value]="ul"）代替了字符串插值，这样value就直接指向当前循环的用户对象，而不是仅仅id。当用户选中某个选项后，userdtl就会是对应的完整用户对象，你在提交表单时直接访问userdtl.id和userdtl.age就能拿到这两个值啦。

如果你确实有特殊需求，要把age作为自定义属性加到ion-option上（虽然这种方式不如绑定整个对象方便），可以这么写：

<ion-select [(ngModel)]="userdtl">
  <ion-option *ngFor="let ul of userlists" [value]="ul.id" [attr.data-age]="ul.age">{{ul.name}}</ion-option>
</ion-select>

但这种方式需要通过DOM操作去读取data-age属性的值，步骤更繁琐，所以还是优先推荐第一种绑定整个对象的方法哦。

内容的提问来源于stack exchange，提问作者Awadhesh Kumar