читать данные JSON и отображать с перерывами

Question

Я хочу отобразить текст, который написан в виде строки JSON с абзацами.Как лучше всего это сделать?

Это мой dashboard.component.ts:

export class DashboardComponent implements OnInit {

items: Array<IService>;
blogs: Array<any>;
comment: any;

constructor(private dataService: DataService) { }

ngOnInit() {
this.dataService.getAllServices()
.subscribe(
  (data: IService[]) => this.items = data,
  (err: any) => console.log(err),
  () => console.log('All done getting the services.')
  );

this.dataService.getAllBlogposts()
  .subscribe(
    (data: any[]) => this.blogs = data,
    (err: any) => console.log(err),
    () => console.log('All done getting the blogposts.')
  );

this.dataService.saveComment(this.comment)
  .subscribe(comment => this.comment.push(this.comment));

}
}

Это мой blogposts.json: моя идея заключалась в том, чтобы поместить строку json в HTMLэлементы, чтобы я мог отобразить HTML.Есть ли лучший способ?

[{
 "postName": "Was sind eigentlich diese Observables in Angular?",
 "postId": "1",
 "postText": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
 </br> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
  </p>"
  }]

Это мой шаблон, где я отображаю посты:

<div class="row">
<h1>Services</h1>
</div>

<div class="card col-md-3 col-lg-3 justify-content-center float-left" 
*ngFor="let item of blogs">

 <div class="row justify-content-center">
  <div class="card-header">
    {{ item.postName }}
  </div>
 </div>

 <div class="row justify-content-center">
  <div class="card-body">
    <span>{{ 'ID: ' + item.postId }}</span> <br>
    <span *ngFor="let el of blogs">
      {{ item.postText }} <br />
    </span>
  </div>
 </div>

  <div class="row justify-content-center">

      <div class="col-md-12">
          <div class="widget-area no-padding blank">
          <div class="status-upload">
            <form>
              <textarea placeholder="What do you think of my blogpost?" >{{ comment }}</textarea>
              <button type="submit" class="btn btn-success green"><i class="fa fa-share"></i> Share</button>
            <br>
            </form>
          </div><!-- Status Upload  -->
        </div><!-- Widget Area -->
      </div>

   </div>
 </div>

Answer 1

Чтобы отобразить разрывы строк, вы должны использовать директиву innerHTML:

<span *ngFor="let el of blogs" [innerHTML]="el.postText"></span>

Angular будет отображать HTML как есть, а не интерпретировать его как простую строку.