具有动态数据和动态选项的离子选择答案

【问题标题】：Ion-select with dynamic data and dynamic options具有动态数据和动态选项的离子选择
【发布时间】：2018-07-30 20:01:26
【问题描述】：

我正在使用ionic-3 开发Hybrid 应用程序。我想显示动态问题及其动态答案选项。我从下面的代码中尝试过，它会显示问题及其可选答案，但我无法选择所有问题的答案（当我选择第二个问题的答案时，第一个问题的答案变为空，因为它的值在所有问题中都是相同的）。请帮助我.

<div *ngFor="let x of question_list">
<div class="amount">{{x.question}}</div>
<ion-item class="select_q">
  <ion-label>Answer</ion-label>
  <ion-select [(ngModel)]="form.ans">
    <div *ngFor="let y of x.ans; let i = index">
    <ion-option  value="{{y}}">{{y}}</ion-option>
  </div>
  </ion-select>
</ion-item>
</div>

【问题讨论】：

显然，如果您对所有选择使用相同的 ngModel，就会发生这种情况。您的具体要求是什么？
我想显示多个问题，它是可选的从单个 jsondata 中选择答案。 jsondata_image
是的，我明白了。我的意思是你想在用户选择的值之后做什么？
在用户选择的值之后，我想将所有问题及其答案传递给数据库。

标签： typescript ionic3

【解决方案1】：

您可以在 JSON 数组数据中添加一个新属性“selected”，并像这样在 ngModel 中使用它。

home.component.ts

this.question_list.forEach((q)=>{
  q["selected"] = ""
})

home.component.html

<ion-select [(ngModel)]="x.selected">
<div *ngFor="let y of x.ans; let i = index">
    <ion-option  value="{{y}}">{{y}}</ion-option>
</div>
</ion-select>

我就是这样做的plunkr。让我知道这是否是您想要的。 PS。我添加了一个按钮来打印出选定的值。您可以根据自己的需要进行更改。

【讨论】：

是的，这正是我想做的。它的作品完美。

【解决方案2】：

非常适合我

我的 json 数据

"data": [
    "6 Years Insurance Plan",
    "10 Years Insurance Plan",
    "20 Years Insurance Plan",
    "Life Time Insurance Plan",
    "Medical Plan"
]

HTML 文件

<ion-item class="cus-select">
    <ion-select (ionChange)="onSelectChange($event)">
        <ion-option *ngFor="let friend of myFriendsArray; let i = index" 
                                [value]="friend.$value">
                                    {{friend.fullName}}
        </ion-option>
    </ion-select>
</ion-item>

在 .ts 文件中

selectedFriendsArray = [];
allplansArray = [];
myFriendsArray = [];
planobject: any;

public loadingController: LoadingController) {
    this.mainurl = global.MAIN_URL;
    this.selectedplan = 0;
}

//change listner
onSelectChange(selectedValue: Number) {
    this.selectedplan = selectedValue;
    console.log('Selected', selectedValue);
    console.log('Change listner SelectedPlan', this.selectedplan);
}

也在.ts解析中

this.http.post(this.mainurl + "plans", postData, requestOptions)
        .subscribe(data => {
    this.hideProgressBar();

    console.log(data['_body']);
    var response = JSON.parse(data['_body']);
    this.allplans = response.data;
    console.log("all plans" + this.allplans);
    for (var i = 0; i < this.allplans.length; i++) {
        this.planobject = { $value: i + 1, fullName: this.allplans[i] };
        this.myFriendsArray.push(this.planobject);
    }
    console.log(this.myFriendsArray);

}, error => {
    this.hideProgressBar();
    console.log(error);
    this.showAlertMessage('Server Error please try');
});

【讨论】：