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，只能访问组件属性和方法。我认为最好创建一个＆＃39; stringify＆＃39;您的组件上的方法，但您可以设置一个JSON属性：

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

此外，我认为你的表达是倒退的。 NgClass将css类作为属性名称，使用true / false值来判断该类是否在元素上，并且需要在括号中：

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

Answer 2

您可以在组件中实现此目的。

myjson:any=JSON;

并在您视图中执行此操作

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

Answer 3

2年后但是，您可以使用内置管道＆＃39; JsonPipe＆＃39; Angular Way进行操作。来自@ angular / common

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

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

3 个答案: