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

Question

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

编辑：

按下添加按钮时文本消失的问题消失了。当前的问题是，当我单击除添加文本区域之外的另一个按钮时，新制作的文本消失了。

这些是加载的标准：

按两次添加按钮后：

现在我填写一些数据：

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

单击按钮后，文本也会消失。 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);