Ionic4 显示带有换行符的文本

Question

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

在输入的 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

我在另一篇文章中找到了答案，所以我想在这里分享，以防你还没有找到。

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