Json object in multiple lines

Ionic Framework ionic-v3
1

{{re | json | prettyPrint}} gives error
{{re | prettyPrint}} gives error

html
<ion-item class=“text” *ngFor=“let re of con | async”>

{{re | json }}

</ion-item>

pipe
import { Pipe, PipeTransform } from ‘@angular/core’;

@Pipe({
name: ‘prettyPrint’,
})
export class ConvertPipe implements PipeTransform {

transform(str: string) {
let replaced = str.replace(/(\r\n|\r|\n)/g, ‘
’);
let array = replaced.split("
");

for(let el of array) {
    if(!!el === false) {
        array.splice(array.indexOf(el), 1);
    }
}

return "<p>" + array.join("</p><p>") + "</p>";

}

}

ts
import { Component } from ‘@angular/core’;

import { NavController } from ‘ionic-angular’;

import { AngularFireDatabase } from ‘@angular/fire/database’;

import { Observable } from ‘rxjs/Observable’;

@Component({

selector: ‘page-home’,

templateUrl: ‘home.html’

})

export class HomePage {
con:Observable<any>;

afDB:AngularFireDatabase;

constructor(public navCtrl: NavController,navctrl:NavController, afDB:AngularFireDatabase) {
if (this.rest == 3000){
this.con =afDB.list(‘mlessone’).valueChanges();
} else{
this.con = this.afDB.list(‘xxxxx’).snapshotChanges();

}
}

result

Capture