HTML / TS：textarea textContent在创建另一个textarea或按钮单击后消失

Question

我有一个HTML页面，其中包含一些textareas，但我还动态添加了更多的textareas。我使用document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></textarea>';在html文件中添加更多textareas。问题是每当我创建一个新的textarea时，另一个新制作的textarea，他们的文本就会消失。但是从一开始就加载的textareas文本并没有消失。

编辑：

按下添加按钮时文本消失的问题消失了。当前的问题是，当我点击另一个按钮而不是添加一个textarea时，新制作的文本会消失。

这些是加载的标准：

按下添加按钮2次后：

现在我填写一些数据：

所以现在我已经填写了所有textareas。下一张图片中的问题是，点击添加按钮后，文本消失的标准文件不符合标准：

单击按钮后文本也会消失。 html和ts文件如下：

html的：

<ion-content class="master">
  <div class="reportList">
    <div *ngFor="let note of paramReport.notes">
      <textarea class="textArea">{{note}}</textarea>
    </div>
    <div id="textAreas"></div>
    <button ion-button color="avioBlue" (click)="addField()">
      <ion-icon name="add-circle"></ion-icon>
    </button>
    <ion-grid>
      <ion-row>
        <ion-col col-6>
          <button ion-button block color="avioOrange" (click)="saveAsDraft()">Save as draft</button>
        </ion-col>
        <ion-col col-6>
          <button ion-button block color="avioRed" (click)="saveAsFinal()">Save as final</button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>

.TS：

addField(){
    document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></textarea>';
  }

saveAsDraft(){
    this.paramReport.isFinal = false;
    this.saveAndSend();
  }

  saveAsFinal(){
    this.paramReport.isFinal = true;
    this.saveAndSend();
  }

  saveAndSend(){
    var textAreaList = document.getElementsByClassName("textArea");
    this.paramReport.notes = [];
    for (let i = 0; i < textAreaList.length; i++) {
      //console.log(textAreaList[i].textContent);
      this.paramReport.notes.push(textAreaList[i].textContent);
    }
    let status: string;
    if (this.paramReport.isFinal) status = "FINAL"; else status = "DRAFT";
    this.reportsProvider.editReportFromList(this.paramReport);
    this.toastCtrl.create({
      message: 'Submitted report with id: ' + this.paramReport.id
      + ' made by ' + this.paramReport.submittedBy + ' as ' + status,
      duration: 2000,
      position: 'top'
    }).present();
    this.navCtrl.push(ReportOverviewPage);
  }

Answer 1

文本消失，因为使用当前的方式，您将删除整个dom节点，并使用新的文本区域重新渲染它们。您应该使用document.createElement API。

var textarea= document.createElement("textarea");
textarea.className = "textArea";
document.getElementById("textAreas").appendChild(textarea);