在 Angular2 模板的表达式中使用 JSON.stringify

Posted 2023-03-05

【中文标题】在 Angular2 模板的表达式中使用 JSON.stringify

【英文标题】：Using JSON.stringify in an expression in Angular2 template

【发布时间】：2016-12-02 00:36:45

【问题描述】：

我有一个小表达式来检查两个对象是否不同，以便显示这个元素（通过添加类名）：

<div ngClass='JSON.stringify(obj1) != JSON.stringify(obj2) ? "div-show" : ""'></div>

问题是我得到这个错误： Cannot read property 'stringify' of undefined.

我需要一种解决方法或适当的解决方案（如果有）。谢谢。

PS：我使用 JSON.stringify() 来比较两个简单的对象，这里没什么特别的。

【参考方案1】：

你可以在你的组件中实现它。

myjson:any=JSON;

在你视图中这样做

<div ngClass='myjson.stringify(obj1) != myjson.stringify(obj2) ? "div-show" : ""'></div>

【讨论】：

感谢您的回答。您的代码运行良好，但@Jason Goemaat 的答案对我来说似乎更干净。

我的朋友没问题

【参考方案2】：

模板代码无法访问所有 javascript，只能访问组件属性和方法。我认为最好在您的组件上创建一个“字符串化”方法，但您可以设置一个 JSON 属性：

public constructor() 
  this.JSON = JSON;

我也认为你的表达方式是倒退的。 NgClass 将 css 类作为属性名和一个真/假值来判断该类是否在元素上，并且它需要放在括号中：

<div [ngClass]="'div-show': JSON.stringify(obj1) != JSON.stringify(obj2)"></div>

【讨论】：

感谢您的回答。您的答案和@rashfmnb 的答案几乎相同。关于添加，我用ngClass 经历了很多情况，我发现我的做法是使用ngClass 最可靠的方法。当然，你的工作完美，但在某些情况下，与我的相比，它没有。 [ngClass] 无法工作的一个示例：<div [ngClass]='classNameHolder1' [ngClass]='"class-name-2": isClassName2'></div>。如果我错了，请随时纠正我。

public JSON : JSON; 字段也应在组件中定义，以免破坏 AOT

【参考方案3】：

2 年后，您可以使用来自 @angular/common 的内置管道“JsonPipe”在 Angular Way 中完成此操作

@Component(
  selector: 'json-pipe',
  template: `<div>
    <p>Without JSON pipe:</p>
    <pre>object</pre>
    <p>With JSON pipe:</p>
    <pre>object | json</pre>
    </div>`
)

export class JsonPipeComponent 
  object: Object = foo: 'bar', baz: 'qux', nested: xyz: 3, numbers: [1, 2, 3, 4, 5];

【讨论】：

这应该是选择的答案

使用 JSON 作为 ngClass 的条件时，管道如何工作？答案与问题所问的不符？

哇，好优雅！