Angular中JSON.stringify报错：TypeError: _co.JSON is undefined

问题原因 #

Angular模板的上下文是组件实例，而全局的JSON对象并不在这个上下文范围内。当你在模板里直接写JSON.stringify(asset)时，Angular会去组件实例（也就是错误里的_co）找名为JSON的属性，自然找不到，所以抛出undefined的错误。

解决方案 #

方案1：在组件中暴露全局JSON对象

最简单的办法是在你的组件类里添加一行代码，把全局的JSON对象赋值给组件的属性，这样模板就能访问到了：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 暴露全局JSON对象给模板
  JSON = JSON;

  getAssets() {
    // 你的原有逻辑
    return [...];
  }
}

之后模板里的{{ JSON.stringify(asset) }}就能正常工作了。

方案2：创建组件内的序列化方法（推荐）

更符合Angular最佳实践的方式是在组件里封装一个专门的序列化方法，这样不仅能解决当前问题，还能方便后续对序列化逻辑做定制（比如处理循环引用、过滤属性等）：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  stringifyAsset(asset: any): string {
    return JSON.stringify(asset);
  }

  getAssets() {
    // 你的原有逻辑
    return [...];
  }
}

模板里改成这样调用：

<div *ngFor="let asset of getAssets()"> {{ stringifyAsset(asset) }} </div>

额外性能优化提醒 #

注意你在*ngFor里直接调用了getAssets()，Angular的变更检测机制会在每次检测时都执行这个方法，这可能导致不必要的性能损耗。建议在组件初始化时把资产数据赋值给一个组件属性，比如：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  assets: any[] = [];
  JSON = JSON;

  ngOnInit(): void {
    // 在这里获取数据并赋值
    this.assets = this.getAssets();
  }

  getAssets() {
    // 你的原有逻辑
    return [...];
  }
}

模板改成：

<div *ngFor="let asset of assets"> {{ JSON.stringify(asset) }} </div>

这样就能避免重复调用getAssets()带来的性能问题。

内容的提问来源于stack exchange，提问作者Titulum