添加3 textarea并添加更多Angular 6的可能性

Question

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

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

TS

export class TextareaComponent {

  textarea: any[]

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

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

但是当我尝试在第一个textarea ... https://stackblitz.com/edit/angular-bjungk?file=src%2Fapp%2Fapp.component.html添加一些东西时，它的效果很奇怪

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

Answer 1

尝试将您的字符串值包装在object中：

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>

工作示例：https://stackblitz.com/edit/angular-vz8g7d

Answer 2

你的代码没有错。只需对代码进行一些更改即可。

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>

TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  textarea = [];

  constructor() {
  }

  trackByFn(index, item) {
    return index; // or item.id
  }

  add() {
    this.textarea.splice(this.textarea.length, 0, '');
  }

  ngOnInit() {
    this.textarea = ['', '', ''];
  }
}

使用刚刚错过了trackBy角度功能。

这是Stackblitz