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

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

问题是我得到了这个错误：

无法读取未定义的属性“stringify”

我需要一种解决方法，或者一个合适的解决方案（如果有的话）。谢谢

---

PS：我使用JSON.stringify（）来比较两个简单的对象，这里没有什么特别之处。

您可以在组件中实现它

myjson:any=JSON;

在你视图中这样做

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

---

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

public constructor() {
  this.JSON = JSON;
}

我还认为你的表达方式是反向的。将css类作为属性名，并使用true/false值来判断该类是否位于元素上，并且它需要放在括号中：

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

---

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

@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管道”，
模板：`
没有JSON管道：

{{object}}
使用JSON管道：

{{object}json}
`
})
导出类JsonPipeComponent{
对象：对象={foo:'bar'，baz:'qux'，嵌套：{xyz:3，数字：[1,2,3,4,5]}；
}

谢谢您的回答。你的答案和@rashfmnb的差不多。关于添加，我在使用

ngClass

时经历了很多情况，我发现我的方法是使用

ngClass

最可靠的方法。当然，你的工作很完美，但在某些情况下，与我的相比，它并不完美。[ngClass]无法工作的一个示例：

。如果我错了，请随时纠正我。

publicjson:JSON字段也应在组件中定义，以避免中断回答。你的代码运行得很好，但是@Jason Goemaat的答案对我来说似乎更清晰。我的朋友没有问题这应该是选择的答案当使用JSON作为ngClass的条件时，管道是如何工作的？答案与问题的内容不符？哇，太优雅了！
@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]}};
}