Question

我使用* ngFor

创建了依赖于响应的动态下拉列表

响应

  Array(3)
        0:
        val_id:1
        role_id:1
        id:1
        is_optional:false
        is_text:false


        1:
        val_id:1
        role_id:1
        id: 2
        is_optional:false
        is_text:false


        2:
        val_id:1
        role_id:1
        id :3
        is_optional: false
        is_text: false

HTML

 <div *ngIf="response != null">
   <p class="">Questions</p>

       <div *ngFor="let question of response" class="row">
        <div class="col-md-5">
       <p>{{question?.question_eng}} </p>
       </div>
       <div *ngIf= "question.is_text == false" class="col-md-7">
       <select class="dropdown" [(ngModel)]="questions" (click)="GetOptionQuestion(question)">
          <option *ngFor = "let option of responseoption">{{option?.name}} </option>
        </select>
    </div>
  </div>
</div>

从上面的代码中我可以创建三个带有选项的下拉菜单，但是当我点击下拉菜单中的任意一个并选择选项时，所有其他剩余的下拉选项也会改变相同的选项值。

请帮助我避免其他下拉菜单更改。

Answer 1

尝试为动态name标记提供id或<select..属性。这将解决问题，

例如，

    <div *ngIf= "question.is_text == false" class="col-md-7">
      <select name="select{{option?.name}}" class="dropdown" [(ngModel)]="questions" (click)="GetOptionQuestion(question)">
      <option *ngFor = "let option of responseoption">{{option?.name}} </option>
      </select>
    </div>

希望这有帮助！

使用* ngFor动态下拉列表

1 个答案: