Angular 4 ngModel binding within nested *ngFor

Question

Hello I am having an issue where I cannot bind data to what you will see as my "Selected" value in this nested *ngFor. what is happening here is I have a list of possible pests (bugs and such), and for each pest I have a list of questions that I have to ask the person. So when I loop through each selected pest, then into each question, (which some pests have the same questions) it binds the answer of one pest to all of the other pests with the same question. No matter what I attempt it is not allowing me to bind the selected answer to the specific pest and not the remaining pests. Here is my HTML:

Here is a working Stackblitz of the thing that I am trying to get to work. just as in the stackblitz i have an array of questions that I push into the array of pests.

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>

then here is an example of what the array that I am looping through looks like.

So, this array just shows one of the pests that I am looping through, I have another pest "Bees" down there on the bottom, and what happens is my checkboxes and select boxes that I have, where I think it should be modeled to the "selected" value of each question of each pest, but when I select an answer for one of them, it shows that that answer is not selected for every other pest that has that same question.

Answer 1

Don't forget, JavaScript/TypeScript objects are reference type. You're pushing same question object into two different arrays, it does not mean both are different - both objects are same - in term of memory location, their location is same.

You can use TypeScript's Object Spread operator to make the object different from each other - they are distinct (different memory location).

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

[Just a side note, it is one level of distinct]

I've forked your stackblitz code with a solution. https://stackblitz.com/edit/angular-rphm3z?file=src/app/app.component.ts