Angular 添加3个文本区域，并可能添加更多角度6

我必须添加3个文本区域和按钮，允许添加下一个文本区域，并能够保存在文本区域中输入的文本 我试着这样做：

  <form>
    <div class="form-group">
      <div class="row">
          <div class="col-md-4" *ngFor="let t of textarea; let in=index">
              <textarea class="form-control" id="" rows="5" [(ngModel)]="textarea[in]"   name="something" class="form-control"  placeholder="Type here to add..."></textarea>
          </div>
         <button (click)="add()">Add input</button>
      </div>
    </div>
  </form>

但当我尝试在第一个文本区域添加一些内容时，会产生奇怪的效果

---

我希望能够在每个textarea中键入内容，现在当我尝试在第一个textarea中键入内容时，第二个和第三个textarea中会显示相同的内容。

尝试将字符串值包装到对象中：

textarea: {value: string}[];

constructor() {
  this.textarea = [{value: ''}, {value: ''}, {value: ''}];
}

add() {
  this.textarea.push({value: ''});
}

<textarea class="form-control"
          rows="5" [(ngModel)]="textarea[in].value" 
          [name]="'something' + in" 
          placeholder="Type..."></textarea>

textarea:{value:string}[]；
构造函数（）{
this.textarea=[{value:''}，{value:''}，{value:''}]；
}
添加（）{
this.textarea.push（{value:'}）；
}

---

工作示例：

尝试将字符串值包装到对象中：

textarea: {value: string}[];

constructor() {
  this.textarea = [{value: ''}, {value: ''}, {value: ''}];
}

add() {
  this.textarea.push({value: ''});
}

<textarea class="form-control"
          rows="5" [(ngModel)]="textarea[in].value" 
          [name]="'something' + in" 
          placeholder="Type..."></textarea>

textarea:{value:string}[]；
构造函数（）{
this.textarea=[{value:''}，{value:''}，{value:''}]；
}
添加（）{
this.textarea.push（{value:'}）；
}

---

工作示例：

代码中没有错误。只需在代码中做一些更改

html

<form>
    <div class="form-group">
        <div class="row">
            <div class="col-md-4" *ngFor="let t of textarea; let in=index; trackBy: trackByFn">
                <textarea class="form-control" id="" rows="5" [(ngModel)]="textarea[in]" [ngModelOptions]="{standalone: true}" placeholder="Type.."></textarea>
            </div>
            <button (click)="add()">Add input</button>
        </div>
    </div>
</form>

使用刚刚错过的

trackBy

角度函数

---

这是代码中没有错误的地方。只需在代码中做一些更改

html

<form>
    <div class="form-group">
        <div class="row">
            <div class="col-md-4" *ngFor="let t of textarea; let in=index; trackBy: trackByFn">
                <textarea class="form-control" id="" rows="5" [(ngModel)]="textarea[in]" [ngModelOptions]="{standalone: true}" placeholder="Type.."></textarea>
            </div>
            <button (click)="add()">Add input</button>
        </div>
    </div>
</form>

使用刚刚错过的

trackBy

角度函数

---

这是您的问题所在

？在stackblitz和seams中尝试了你的代码：我希望能够在每个textarea中键入内容，现在当我尝试在第一个textarea中键入内容时，第二个和第三个textarea中显示的内容是相同的。你尝试过被动形式吗？没有，但不可能以这种方式执行？当然是。见我下面的答案。但是，

reactive form

在角度上有更多的优势。你有什么问题？在stackblitz和seams中尝试了你的代码：我希望能够在每个textarea中键入内容，现在当我尝试在第一个textarea中键入内容时，第二个和第三个textarea中显示的内容是相同的。你尝试过被动形式吗？没有，但不可能以这种方式执行？当然是。见我下面的答案。但是，

反应形式

在角度上有更多的优势。