Разрывы строк теряются при передаче данных? - PullRequest
Новая
       12

Разрывы строк теряются при передаче данных?

0 голосов
/ 09 января 2019

Немного странная проблема, которую я потратил некоторое время, пытаясь решить безрезультатно.

У меня есть массив типа String, который содержит некоторые данные (некоторые из которых необходимо правильно отформатировать в модальном окне.

Пример строки в этом массиве: 

"Some sentence which will be followed by a list. <br/> - List Item 1 <br/> - List Item 2 <br/> - List Item 3",

Вот код, который я использую для передачи этих данных из моего класса TypeScript в html:

home.ts 

const myPressedData = {
      title: titleListFinance[tileNum],
      longDesc: longDescListFinance[tileNum]
    };

    const myModalOptions: ModalOptions = {
      enableBackdropDismiss: true,
      cssClass: "my-modal"
    }

    const myModal = this.modal.create('ModalPage', { data: myPressedData }, myModalOptions);

    myModal.present();

modal.ts 

ionViewWillLoad() {
    let dataIn = this.navParams.get('data');
    this.theTitle = dataIn.title;
    this.theLongDesc = dataIn.longDesc;
  }

modal.html 

<ion-header >

  <ion-navbar>
    <ion-title align="center">{{theTitle}}</ion-title>
  </ion-navbar>

</ion-header>

<ion-footer>
  <ion-buttons width="100%" >
        <button full ion-button (click)="closeModal()">Close </button>
  </ion-buttons>
</ion-footer>

<ion-content padding class="description">

  <p>
    {{theLongDesc}}
  </p>

</ion-content>

Конечный результат выглядит следующим образом, без разрывов строк. Я также пытался
\ n \ n и все другие формы разрывов строк, которые мне известны. Любая помощь будет оценена, друзья!

enter image description here

Ура!

1 Ответ

0 голосов
/ 09 января 2019

Вам нужна безопасная труба 

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  constructor(protected _sanitizer: DomSanitizer) {
  }
  public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
      case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
      case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
      case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        throw new Error(`Unable to bypass security for invalid type: ${type}`);
    }
  }
}

и используйте 

<p [innerHTML]="theLongDesc | safe:'html'"></p>
...