Angular ngFor 循环的神秘问题

Question

我有动态 select（或 dropdown）控件，如图所示 below.It 正在工作 fine.But 它有一些奥秘 issue.Can 请告诉我如何解决？我认为这是 ngFor 循环 index 的问题。也许是缓存问题或类似 that.Any 的想法，好吗？

注意：我使用了模板驱动形式的单向数据绑定。

.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)。

Answer 1

很难说，但据我所知，这是一项调查，每次 next 按下时都会加载问题。我能看到的唯一问题是 ion-select 绑定到 ngModel，这是所有问题共享的相同值。因此，一旦设置了第一个问题，接下来的问题将读取相同的值。

我认为您应该将其值绑定到索引数组。

Answer 2

用户设置的 name5 值不会为下一个问题重置。

您需要有 2 种方式绑定才能在为每个问题发送后重置值。

<ion-select name="{{question?.name}}" placeholder="Select" [(ngModel)]="selectedIndex"> 
<ion-option *ngFor="let i of inputs;let index = index" value="{{index}}">{{i.display}}</ion-option> 
</ion-select>

在组件中，this.selectedIndex = null

Angular ngFor 循环的神秘问题

Mysteries issue on Angular ngFor loop

ionic-framework

ionic2

ionic3

angular