angular - 如何在 ionic 选择上获得多个值

Question

我正在尝试使用 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=""输入写入数组，我该怎么做？

感谢阅读请帮助我..

Answer 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