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 Iзакодировать строку описания

 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>