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

【问题标题】：Using JSON.stringify in an expression in Angular2 template在 Angular2 模板的表达式中使用 JSON.stringify
【发布时间】：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() 来比较两个简单的对象，这里没什么特别的。

【问题讨论】：

标签： html angular

【解决方案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 的条件时，管道如何工作？答案与问题所问的不符？
哇，好优雅！