Question

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

<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>

Answer 1

您可以添加新属性＆＃34;已选择＆＃34;在你的JSON数组数据中，并在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。我添加了一个按钮来打印出选定的值。您可以根据自己的要求进行更改。

Answer 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');
});

通过动态数据和动态选项进行离子选择

2 个答案: