我有动态select
(或dropdown
)控制,如下所示。它工作正常。但它有一些神秘的问题。你能告诉我如何解决这个问题吗?我认为这是ngFor
循环index
上的一个问题。也许是缓存或类似的东西。请问有什么想法吗?
注意:我使用了单向数据绑定和模板驱动形式。
html的
<div *ngIf="question?.type=='dropdown'">
<ion-note>{{question?.index}} {{question?.prompt}}*</ion-note><br/><br/>
<ion-list>
<ion-item>
<ion-select name="{{question?.name}}" placeholder="Select" #name5="ngModel" ngModel>
<ion-option *ngFor="let i of inputs;let index = index" value="{{index}}">{{i.display}}</ion-option>
</ion-select>
</ion-item>
</ion-list>
<div text-right>
<button ion-button type="button" (click)="goToNext(currentQuestionCode,name5)">Next</button>
</div>
</div>
它从JSON文件中检索数据。
.TS
getQuestionsAndInputs(inputs: any, questionCode: string): void {
_.some(inputs, (value, key) => {//get inputs
if (key == questionCode) {
this.inputs = value;
return true;
}
});
}
JSON文件的子集。
"28903243": [
{
"encode": "4:30pm",
"display": "4:30pm",
"label": ""
},
{
"encode": "4:45pm",
"display": "4:45pm",
"label": ""
},
{
"encode": "5:00pm",
"display": "5:00pm",
"label": ""
},
{
"encode": "5:15pm",
"display": "5:15pm",
"label": ""
},
{
"encode": "5:30pm",
"display": "5:30pm",
"label": ""
},
],
正确显示的第一个select
组件。
我选择了第二项(index = 1
)。
当我按下下一个按钮并带上第二个select
组件时,它会自动将第二个项目显示为该集合中的所选项目(index = 1
)。