web-dev-qa-db-ja.com

Angular 2パイプはJSONオブジェクトをきれいに印刷されたJSONに変換します

JSONオブジェクト文字列を受け取り、ユーザーに表示するためにきれいに印刷/フォーマットされたものを返すAngular 2パイプを書き込もうとしています。

たとえば、次のようになります。

{"id"：1、 "number"： "K3483483344"、 "state"： "CA"、 "active"：true}

そして、HTMLで表示されたときに次のようなものを返します。

enter image description here

だから私の意見では、私は次のようなものを持つことができます：

<td> {{ record.jsonData | prettyprint }} </td>
javascriptjsonfilterangularpipe
66
Derek

組み込みのjsonパイプを使用して、さらに簡単な方法を追加したいと思います。

<pre>{{data | json}}</pre>

このように、フォーマットは保持されます。

214
Shane Hsu

このためのカスタムパイプを作成します。

@Pipe({
  name: 'prettyprint'
})
export class PrettyPrintPipe implements PipeTransform {
  transform(val) {
    return JSON.stringify(val, null, 2)
      .replace(' ', '&nbsp;')
      .replace('\n', '<br/>');
  }
}

この方法で使用します：

@Component({
  selector: 'my-app',
  template: `
    <div [innerHTML]="obj | prettyprint"></div>
  `,
  pipes: [ PrettyPrintPipe ]
})
export class AppComponent {
  obj = {
    test: 'testttt',
    name: 'nameeee'
  }
}

このstackblitzを参照してください： https://stackblitz.com/edit/angular-prettyprint

15
Thierry Templier