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

Question

我有一个小表达式来检查2个对象是否不同,以显示这个元素(通过添加类名):

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

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

我需要一种解决方法,或者提供适当的解决方案.谢谢.

PS:我使用JSON.stringify()比较2个简单的对象,这里没什么好看的.

Answer 1

模板代码无权访问所有javascript,只能访问组件属性和方法.我认为最好在组件上创建一个'stringify'方法,但是你可以设置一个JSON属性:

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

我也认为你的表达是倒退的. NgClass将css类作为属性名称和true/false值来判断该类是否在元素上,并且它需要在括号中:

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

Answer 2

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]}};
}

Answer 3

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

myjson:any=JSON;

在你看来这样做

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