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

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

Ionic4显示带有换行符的文本

1 个答案: