Angular 4 嵌套 *ngFor 内的 ngModel 绑定

Question

你好，我遇到了一个问题，我无法将数据绑定到你将在这个嵌套 *ngFor 中看到的 "Selected" 值。这里发生的是我有一个可能的害虫列表（虫子等），对于每个害虫，我都有一个问题列表，我必须问这个人。因此，当我循环遍历每个 selected 害虫，然后进入每个问题（某些害虫有相同的问题）时，它将一个害虫的答案绑定到所有其他具有相同问题的害虫。无论我尝试什么，它都不允许我将 selected 答案绑定到特定的害虫，而不是其余的害虫。这是我的 HTML：

这是我正在尝试开始工作的东西的工作 Stackblitz。就像在 stackblitz 中一样，我有一系列问题，我将它们推入一系列害虫中。

STACKBLITZ ANGULAR APP

  <div *ngFor="let each of selectedPestProblems; let x = index;">
    <div *ngIf="selectedPest === x" class="pestQuestions">
      <div *ngFor="let questions of each.question; let i = index; trackBy:trackByIndex">
        <h4 *ngIf="i == 0" style="padding-left: 15px;"><br>{{each.pest}}</h4>
        <label>{{questions.question}}</label>
        {{x + " " + i}}
        <div *ngIf="questions.type == 'checkbox'" (click)="changeCheckBox2(x, i)">
          <input type="checkbox" class="css-checkbox" [(ngModel)]="selectedPestProblems[x].question[i].selected" name="checkbox{{i + '' + x}}">
          <label class="css-label"> - {{questions.title}}</label>
        </div>
        <div *ngIf="questions.type == 'select'">
          <select class="otherSelects" [(ngModel)]="selectedPestProblems[x].question[i].selected" name="select{{i + '' + x}}">
            <option *ngFor="let answers of questions.answer" [value]="answers.id">
              {{answers.name}}
            </option>
          </select>
        </div>
        <div *ngIf="questions.type == 'selectOther'">
          <select class="otherSelects" [(ngModel)]="selectedPestProblems[x].question[i].selected" name="selectOther{{i + '' + x}}">
            <option *ngFor="let answers of questions.answer" [value]="answers.id">
              {{answers.name}}
            </option>
          </select>
          <div *ngIf="questions.selected == 5">
            <br>
            <textarea [(ngModel)]="selectedPestProblems[x].question[i].description" placeholder="Tell Us Where It Is Located." name="description{{i + '' + x}}"></textarea>
          </div>
        </div>
        <br>
        <div *ngIf="i == selectedPestProblems[x].question.length - 1">
          <button (click)="removePestProblem(x)" style="margin-left: 15px;">Remove Pest Problem</button>
          <br>
        </div>
      </div>
    </div>
  </div>

然后这是我正在循环的数组的示例。

所以，这个数组只显示了我正在循环的一个害虫，我在底部有另一个害虫 "Bees"，发生的是我的复选框和 select 框我有，我认为它应该建模为每个害虫的每个问题的 "selected" 值，但是当我 select 对其中一个问题的答案时，它表明该答案不是 select针对所有其他有相同问题的害虫进行编辑。

Answer 1

别忘了，JavaScript/TypeScript 对象是引用类型。您将同一个问题对象推入两个不同的数组，这并不意味着两者不同 - 两个对象相同 - 就内存位置而言，它们的位置相同。

您可以使用 TypeScript 的 Object Spread 运算符使对象彼此不同 - 它们是不同的（不同的内存位置）。

ngOnInit(){
    for(var i = 0; i < this.selectedPestProblems.length; i++){
      this.selectedPestProblems[i].question.push({...this.question1});
      this.selectedPestProblems[i].question.push({...this.question2});
    }
  }

[顺便提一句，这是一个不同的层次]

我已经用一个解决方案分叉了你的 stackblitz 代码。 https://stackblitz.com/edit/angular-rphm3z?file=src/app/app.component.ts

Angular 4 嵌套 *ngFor 内的 ngModel 绑定

Angular 4 ngModel binding within nested *ngFor

angular

typescript

angular-ngmodel