Angular ngFor循环中的神秘问题

时间:2017-05-07 10:41:50

标签: angular ionic-framework ionic2 ionic3

我有动态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组件。

enter image description here

我选择了第二项(index = 1)。

enter image description here

当我按下下一个按钮并带上第二个select组件时,它会自动将第二个项目显示为该集合中的所选项目(index = 1)。

enter image description here

enter image description here

0 个答案:

没有答案