javascript - Ionic4 显示带换行符的文本

Question

我希望用户可以使用回车键在多行输入字段中插入文本。然后我想将文本保存在一个字符串中，然后将其发送到后端。在应用程序的详细信息页面上，我想显示插入的文本但带有换行符。

在输入的 html 文件中，我试过了

<div>
    <ion-item>
          <ion-textarea rows="5" name="description" type="text" 
               placeholder="Description" [(ngModel)]="description" required>
          </ion-textarea>
    </ion-item>
</div> 

在 .ts 中我对描述字符串进行编码

 this.description = encodeURI(this.description);

但是当我想在另一个 html 文件中显示插入的文本时

<ion-col size="12">
    <div class="idea-description">
      <ion-text style = "white-space: pre-wrap;">{{ idea.description }}</ion-text>
    </div>

它只显示编码后的文本，但没有换行符。

Answer 1

我在 another post 中找到了答案，所以我想在这里分享，以防你还没有找到它。

\n如果您将以下样式应用于元素，将显示为换行符:

white-space: pre-wrap

我将其添加到元素中，现在数据在我的 <ion-text> 中显示为换行符元素。

<ion-card-content class="" style="padding-top:0; white-space: pre-wrap;">
            <ion-text [innerHtml]="notification.content"></ion-text>
</ion-card-content>