Угловая привязка 4 ngModel внутри вложенного * ngFor - PullRequest
Новая
       6

Угловая привязка 4 ngModel внутри вложенного * ngFor

0 голосов
/ 01 июня 2018

Здравствуйте. У меня возникла проблема, из-за которой я не могу связать данные с тем, что вы увидите как мое "Выбранное" значение в этом вложенном * ngFor.что происходит здесь, у меня есть список возможных вредителей (ошибок и тому подобное), и для каждого вредителя у меня есть список вопросов, которые я должен задать человеку.Поэтому, когда я перебираю все выбранные вредные организмы, затем в каждом вопросе (у некоторых вредных организмов одни и те же вопросы) он связывает ответ одного вредного организма со всеми другими вредными организмами с тем же вопросом.Независимо от того, что я пытаюсь сделать, это не позволяет мне связать выбранный ответ с конкретным вредным организмом, а не с остальными вредными организмами.Вот мой HTML:

Вот работающий 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>

, вот примеркак выглядит массив, через который я зацикливаюсь.

What my array looks like.

Итак, этот массив просто показывает одного из вредителей, через которых я зацикливаюсь, у меня естьдругой вредитель «Пчелы» там внизу, и что происходит, это мои флажки и ящики выбора, которые у меня есть, где я думаю, что они должны быть смоделированы с «выбранным» значением каждого вопроса каждого вредителя, но когда я выбираю ответдля одного из них это показывает, что этот ответ не выбран для каждого другого вредного организма, у которого есть тот же вопрос.

1 Ответ

0 голосов
/ 01 июня 2018

Не забывайте, объекты JavaScript / TypeScript являются ссылочными типами.Вы помещаете один и тот же объект вопроса в два разных массива, это не означает, что оба объекта различны - оба объекта одинаковы - с точки зрения места в памяти, их расположение одинаково.

Вы можете использовать оператор Object Spread для TypeScript, чтобысделать объект отличным друг от друга - они различны (разные места памяти).

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

[Просто примечание, это один уровень отличия]

Я раздвоил ваш код стекаблица с помощью решения.https://stackblitz.com/edit/angular-rphm3z?file=src/app/app.component.ts

...