ngModel отражает все текстовые области

Question

У меня есть несколько текстовых областей (цикл с ngFor и добавление новых div с текстовыми областями внутри). Мне нужно, чтобы каждая текстовая область имела отдельный ngModel, и я не хочу напрямую связывать это со свойством объекта в dataArray - например:

[(ngModel)]='data.note' or [(ngModel)]='data.feedback' . 

Это работает, но у меня нет свойства обратной связи в dataArray, поэтому оно не будет работать для второй текстовой области.

Например, с моей текущей реализацией изменения в одной текстовой области отражаются во всех других текстовых областях. Я пытался с индексным подходом, но получаю ошибку:

ERROR TypeError: Cannot read property '1' of undefined

<div *ngFor="let data of dataArray; let index=index;trackBy:trackByIndex;">
<div class="card-body">
  <form class="form">
    <div class="form-body">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <textarea name="note" [(ngModel)]='selectedNote' class="form-control"
              rows="2"></textarea>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <textarea name="feedback" [(ngModel)]='selectedFeedback' class="form-control" rows="4"></textarea>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

С текущим кодом, если я добавлю текст в первую текстовую область с именем «note», это изменение будет отражено для всех текстовых областей с именем «note». Как уже упоминалось, пробовал с добавлением

[(ngModel)]='selectedFeedback[index]' but i am getting error.

Также пробовал указывать разные имена для textareas:

<textarea name="note{{index}}" [(ngModel)]='dataArray[index]' rows="2"></textarea> OR

  <textarea name="note{{index}}" [(ngModel)]='selectedNote' rows="2"></textarea> 

но изменения снова отражаются для каждой текстовой области.

Answer 1

Вы можете попробовать это с любым массивом, я использую функцию data (n), чтобы вернуть массив длины n. В этом примере это просто для итерации

<div *ngFor="let item of data(8); let i = index">
  <textarea [(ngModel)]='values[i]'></textarea>
</div>

// To reflect changes
<div *ngFor="let item of data(8); let i = index">
  <div>{{ values[i] }}</div>
</div>

С TS

export class AppComponent  {

  values = [];

  data(n) {
    return Array(n);
  }
}

Рабочий пример в Stackblitz.com

Answer 2

ngModel связывается со свойством name. Поэтому, если вы хотите использовать несколько текстовых областей, попробуйте использовать другой атрибут имени. Вы можете перебирать как -

<ng-container *ngIf="let data of dataArray; index as i">
   <textarea name="feedback_{{i}}" [(ngModel)]='selectedFeedback' class="form-control" rows="4"></textarea>
</ng-container>