如何在离子选择上获得多个值

Posted 2023-03-08

【中文标题】如何在离子选择上获得多个值

【英文标题】：how to get multiple values on ion-select

【发布时间】：2018-05-21 01:00:21

【问题描述】：

我正在尝试使用 ion-select 和 ion-option 创建一个简单的创建组页面。

我的html；

<ion-item>
  <ion-label>Select Friends</ion-label>
  <ion-select [(ngModel)]="selectedFriendsArray" multiple="true" cancelText="cancel" okText="ok">
    <ion-option *ngFor="let friend of myFriendsArray; let i = index" value="friend.$value" selected="false">friend.fullName (@friend.$key)</ion-option>
  </ion-select>
</ion-item>

就是代码，我可以成功获取myFriendsArray；那Array的结构是这样的； (console.log(myFriendsArray))

0: $value: "2MAHfzIraRO3lsYrlwhY6dlVUi52", fullName: "Walter White", userName: "wwhite", $key: "wwhite", $exists: ƒ
1:$value: "4TV40AiZb6a9IPNjhSGM7Q15EPz1", fullName: "Jesse Pinkman", userName: "test1", $key: "test1", $exists: ƒ
2:$value: "XKCk1bE0DvUKFTPTpFebkxLGI4J2", fullName: "Tony Soprano", userName: "test2", $key: "test2", $exists: ƒ
3:$value: "yICGapOLBaZae7EgdiRlGA4lmPF3", fullName: "Paulie", userName: "test4", $key: "test4", $exists: ƒ
4: $value: "JrdULejAG3ZXp3ws7foZAvhZb8w2", fullName: "Polat Alemdar", userName: "polat123", $key: "polat123", $exists: ƒ

当用户选择要添加的好友时，selectedFriendsArray 会这样登录控制台；

0: "4TV40AiZb6a9IPNjhSGM7Q15EPz1"
1: "XKCk1bE0DvUKFTPTpFebkxLGI4J2"
2: "yICGapOLBaZae7EgdiRlGA4lmPF3"

但我不想要那样，我想要完全那样；

1:$value: "4TV40AiZb6a9IPNjhSGM7Q15EPz1", userName: "test1"
2:$value: "XKCk1bE0DvUKFTPTpFebkxLGI4J2", userName: "test2"
3:$value: "yICGapOLBaZae7EgdiRlGA4lmPF3", userName: "test4"

因为我想在我的数据库中有这样的数据结构；

groups>groupid>members>memberuid: "memberusername"

我真的很喜欢 ion-option 但它只将 value="" 输入写入数组，我该怎么做？

感谢您阅读帮助我..

【参考方案1】：

您可以使用value“构建”您想要的对象：

<ion-option *ngFor="let friend of myFriendsArray; let i = index" 
  [value]="$value: friend.$value, userName: friend.userName" selected="false">
  friend.fullName
</ion-option>

StackBlitz

【参考方案2】：

<ion-item>
  <ion-label>Select Friends</ion-label>
  <ion-select [(ngModel)]="selectedFriendsArray" multiple="true" cancelText="cancel" okText="ok">
    <ion-option *ngFor="let friend of myFriendsArray; let i = index" value="friend.$value" selected="false" (ionSelect)="friedFun(friend)">friend.fullName (@friend.$key)</ion-option>
  </ion-select>
</ion-item>

ts 文件

friendFun(value)
    var myObj =  value: value.value, userName:  value.userName;

【讨论】：

它没有用。我不知道为什么.. 我应该使用 myObj 吗？