2017-12-07 16 views
2

イオン選択とイオンオプションを持つ簡単なグループ作成ページを作成しようとしています。イオン選択で複数の値を取得する方法

my 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を取得できます。その配列の構造はそうです。 (に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"} 

私のデータベースにはこのようなデータ構造が必要です。

グループ>グループID>メンバー> memberuid:どのように私はそれを行うことができ、「」=アレイへの入力を「memberusername」

は、私が本当にイオンオプションを愛するが、それは唯一の値を書き込みますか?私にしてください支援読み取るため

感謝..

答えて

1

ファイル:

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

StackBlitz

+0

それは%100!ありがとう。 – ugrdursun

+0

あなたは大歓迎です:) – Alex

0
<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はあなたがvalueにしたいオブジェクトを "構築" することができます

friendFun(value){ 
    var myObj = {value: value.value, userName: value.userName}; 
} 
+0

それは仕事をしませんでした。私は理由を知りません..私はそのmyObjを使用する必要がありますか? – ugrdursun