ngModel反映了所有textareas

Question

我有多个textareas（使用ngFor循环并添加带有textareas的新div）。 我需要的是每个textarea都有单独的ngModel，我不想直接将它绑定到dataArray中对象的属性 - 例如：

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

这有效但我在dataArray中没有反馈属性，所以它不适用于第二个textarea。

例如，我当前的实现更改在一个textarea中反映在所有其他textareas。 我试过索引方法，但得到错误：

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'的第一个textarea中添加一些文本，则所有具有名称'note'的textareas都会反映出更改。 如上所述尝试添加

[(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

ngModel与name属性绑定。 因此，如果您想使用多个textarea尝试使用不同的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>

Answer 2

您可以尝试使用任何数组，我使用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中的工作示例