在 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 个简单的对象，这里没什么特别的。

原文由 Pho Huynh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2 年后，但是，您可以使用来自@angular/common 的内置管道“JsonPipe”以 Angular 方式 完成它

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

原文由 Marcos R 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

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

原文由 Jason Goemaat 发布，翻译遵循 CC BY-SA 3.0 许可协议