Angular10 JsonPipe

在本文中，我们将了解 Angular 10 中的JsonPipe是什么以及如何使用它。

JsonPipe用于将对象转换为 JSON 表示

句法：

{{ value | json}}

NgModule：JsonPipe使用的模块是：

• 通用模块

方法：

• 创建要使用的 Angular 应用程序
• 无需任何导入即可使用 JsonPipe
• 在 app.component.ts 中定义接受 JsonPipe 值的变量。
• 在 app.component.html 中使用上面的语法和 '|'用于制作 JsonPipe 元素的符号。
• 使用 ng serve 为 Angular 应用程序服务以查看输出

输入值：

• value：要转换为 JSON 格式字符串的任何类型的值

示例 1：

app.component.ts

import { Component }
from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    // JSON object 
    emp: Object = {
        "list":[
        {
            "name":"Billy Lee",
            "position":"Web Developer",
            "office":"Detroit",
            "salary":"$50000",
            "edit":"Edit",
            "delete":"Delete"
  
        },
        {
            "name":"John Doe",
            "position":"Manager",
            "office":"Troy",
            "salary":"$90000",
            "edit":"Edit",
            "delete":"Delete"
        },
        {
            "name":"James Baxter",
            "position":"IT Support",
            "office":"Detroit",
            "salary":"$30000",
            "edit":"Edit",
            "delete":"Delete"
        },
        {
            "name":"Jimmy Lee",
            "position":"Web Developer",
            "office":"Detroit",
            "salary":"$50000",
            "edit":"Edit",
            "delete":"Delete"
        },
        {
            "name":"Nick Wess",
            "position":"Sales",
            "office":"Ann Arbor",
            "salary":"$40000",
            "edit":"Edit",
            "delete":"Delete"
        },
        {
            "name":"Sarah Deets",
            "position":"Graphic Designer",
            "office":"Ann Arbor",
            "salary":"$40000",
            "edit":"Edit",
            "delete":"Delete"
        }
        ]
}
  }

app.component.html

   
{{emp | json}}
 

输出：

参考： https://angular.io/api/common/JsonPipe