有时候我们需要在模板中使用一个变量，但是这个变量的值是一个对象，这时我们可以使用JsonPipe来格式化这个对象。

ts代码

import {Component} from '@angular/core';
// 引入JsonPipe
import {JsonPipe} from "@angular/common";

@Component({
    selector: 'app-index',
    standalone: true,
    // imports JsonPipe
    imports: [JsonPipe],
    templateUrl: './index.component.html',
    styleUrl: './index.component.scss'
})
export class IndexComponent {
    public data: any = {
        name: 'John Doe',
        age: 30
    }
}

html代码

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