Angular Pipe Json例子|漂亮的格式代码

这是一个关于Angular管道json例子的简短教程

• 如何在Angular组件中打印json对象

Angular有一个内置的管道，叫做jsonPipe，来自@angular/common模块。

这将有助于将一个typescript对象转换为JSON格式的类型。

这对调试和操作对象数据很有用。

以下是html模板中的语法

{{object|json}}

如何在Angular中打印一个没有json管道的对象？

让我们在typecript angular应用程序中声明一个Employee.ts对象。

export class Employee {
  id: Number;
  name: string;
  salary: Number;
}

让我们创建一个angular typescript组件。创建并初始化带有数据的雇员数组。

import { Component } from '@angular/core';
import { Employee } from './employee';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  employees: Employee[] = [
    { id: 1, name: 'Ram', salary: 5000 },
    { id: 2, name: 'John', salary: 1000 },
    { id: 3, name: 'Franc', salary: 3000 },
    { id: 4, name: 'Andrew ', salary: 8000 }
  ];
  constructor() {}

  ngOnInit() {}
}

让我们在Angular html组件中打印该对象数组或对象。

<div>
  {{employees}}
</div>

输出

[object Object],[object Object],[object Object],[object Object]

一个对象或数组对象以[object object] 格式打印对象，这对开发者调试对象的内容没有帮助。

因此，Angular中的JSON管道可以帮助开发者以json格式打印对象的内容。

Angular JSON管道打印对象数组

让我们对一个对象或对象的数组使用json pipe。

<div>
  {{employees |json}}
</div>

并输出

[ { "id": 1, "name": "Ram", "salary": 5000 }, { "id": 2, "name": "John", "salary": 1000 }, { "id": 3, "name": "Franc", "salary": 3000 }, { "id": 4, "name": "Andrew ", "salary": 8000 } ]

JSON显示为字符串格式，没有分隔符或漂亮的格式。

如何以漂亮的格式打印json

Angular json pipe以pretty格式打印

可以使用html中的pre标签显示JSON数据

<pre><div>{{employees | json}}</div></pre>

输出。

[  {    "id": 1,    "name": "Ram",    "salary": 5000  },  {    "id": 2,    "name": "John",    "salary": 1000  },  {    "id": 3,    "name": "Franc",    "salary": 3000  },  {    "id": 4,    "name": "Andrew ",    "salary": 8000  }]

自定义json管道以tab格式打印

在默认情况下，Angular提供的json管道有2个空格。

export class JsonPipe implements PipeTransform {

  transform(value: any): string {
    return JSON.stringify(value, null, 2);
  }
}

我们可以使用JSON.stringify 写一个自定义的管道，有4个空格。

export class JsonTabPipe implements PipeTransform {

  transform(value: any): string {
    return JSON.stringify(value, null, 4);
  }
}

Angular JSON管道循环管道

让我们在typescript中拥有一个模型父和子模型。

export class Parent {
  id: number;
  child: Child;
}

export class Child {
  name: string;
  parent: Parent;
}

让我们在父子对象中创建一个数据初始化。

import { Component } from '@angular/core';
import { Child, Parent } from './parent';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  a = { name: 'Groucho', sibling: '' };
  b = { name: 'Harpo', sibling: this.a };
  parent: Parent;
  child: Child;
  constructor() {
    this.child = { name: 'ram', parent: this.parent };
    this.parent = { id: 1, child: this.child };
  }

  ngOnInit() {}
}

而现有的模板给出了一个错误

{{child | json}}

它给出了一个错误TypeError。将循环结构转换为JSON

所以，JSON管道在Angular应用程序中无法工作。

你可以使用下面的JSON stringify方式来使用循环对象。

JSON管道在Angular中不工作

当你使用json pipe时，你会遇到以下错误

• 未处理的承诺拒绝。Template parse errors The pipe 'json' could not be found
• JSON管道在Angular中不工作
• 在Angular中找不到管道

CommonModule 原因是json管道是一个来自@angular/common 模块的管道。

你必须在应用模块中导入CommonModule ，即app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {
  BrowserAnimationsModule
} from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    BrowserAnimationsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}