正文 

当前位置： 首页 > 问答 >

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

     2023-03-05     41

关键词：

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

【问题讨论】：

【参考方案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] 无法工作的一个示例：&lt;div [ngClass]='classNameHolder1' [ngClass]='"class-name-2": isClassName2'&gt;&lt;/div&gt;。如果我错了，请随时纠正我。 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 的条件时，管道如何工作？答案与问题所问的不符？ 哇，好优雅！

Angular2：我们可以在模板中插入哪些表达式

】Angular2：我们可以在模板中插入哪些表达式【英文标题】：Angular2:whatexpressionscanweinterpolateintemplate【发布时间】：2016-11-0406:47:10【问题描述】：我读到我们可以插入Javascript表达式。我们可以插入的有效Javascript表达式列表是什么... 查看详情

如何使用angular2在单个组件中调用多个模板

】如何使用angular2在单个组件中调用多个模板【英文标题】：Howtocallmultipletemplatesinsinglecomponentusingangular2【发布时间】：2017-04-1522:27:18【问题描述】：我是angularJs2的新手。我的要求是我想要单个组件中的多个模板。就像我有ForgetP... 查看详情

Angular2 NgFor在表达式中绑定数组

】Angular2NgFor在表达式中绑定数组【英文标题】：Angular2NgForbindarrayinexpression【发布时间】：2017-05-0822:38:36【问题描述】：ngfor循环中使用的数组，当它更新时，如何让Angular2重新运行该表达式？目前它不会输出任何东西，因为它在... 查看详情

在 Angular2 中使用 Typescript 读取 JSON

】在Angular2中使用Typescript读取JSON【英文标题】：ReadingJSONusingTypescriptinAngular2【发布时间】：2016-06-1203:47:42【问题描述】：在对Firebase进行POST之后，我从Firebase返回了这个"name":"-KBfn7iFNIxSuCL9B-g5"如何使用Typescript读取POST请求返回的... 查看详情

async/await 防止 Angular2 在模板语句中使用时渲染组件

】async/await防止Angular2在模板语句中使用时渲染组件【英文标题】：async/awaitpreventsAngular2fromrenderingthecomponentwhenusedintemplatestatement【发布时间】：2016-07-1008:28:43【问题描述】：单击组件的按钮时将执行以下方法。asynconClickButton()await... 查看详情

在 Angular 2 中使用 *ngFor 和 JSON 对象

】在Angular2中使用*ngFor和JSON对象【英文标题】：Using*ngForwithaJSONobjectinAngular2【发布时间】：2016-12-2913:40:03【问题描述】：我正在尝试实现一个解耦的wordpress解决方案，但在我的模板中显示JSON对象属性时有些困惑。我能够为WPAPI返... 查看详情

Typescript - 如何在 Angular2 中正确使用 jsPDF？

】Typescript-如何在Angular2中正确使用jsPDF？【英文标题】：Typescript-howtocorrectlyusejsPDFinAngular2?【发布时间】：2016-11-2505:52:33【问题描述】：我创建了一个生成JSON数据的Angular2应用程序。我想将此JSON输出保存到文件中，最好是PDF文件... 查看详情

在 angular2 视图模板中传递枚举

】在angular2视图模板中传递枚举【英文标题】：Passenumsinangular2viewtemplates【发布时间】：2016-06-2517:25:02【问题描述】：我们可以在angular2视图模板中使用枚举吗？<divclass="Dropdown"dropdownType="instrument"></div>将字符串作为输入... 查看详情

angular2的模板语法

Angular应用管理着用户之所见和所为，并通过Component类的实例（组件）和面向用户的模板来与用户交互。从使用模型-视图-控制器(MVC)或模型-视图-视图模型(MVVM)的经验中，很多开发人员都熟悉了组件和模板这两个概念。在Angular中... 查看详情

在 Jquery 插件模板中绑定 Angular2 组件

】在Jquery插件模板中绑定Angular2组件【英文标题】：BindingAngular2componentsinsideofaJqueryplugintemplate【发布时间】：2016-12-0201:53:30【问题描述】：我正在Angular2项目中使用剑道。正确设置小部件没有问题：ngOnInit()letoptions=inputsToOptionObject... 查看详情

在angular2中动态加载HTML模板

】在angular2中动态加载HTML模板【英文标题】：DynamicallyloadHTMLtemplateinangular2【发布时间】：2017-04-0818:18:27【问题描述】：我使用angular-cli创建了一个项目，其中包含AppComponent如下：importComponentfrom\'@angular/core\';@Component(selector:\'app-roo... 查看详情

Angular2 从 JSON 数组中删除重复项

】Angular2从JSON数组中删除重复项【英文标题】：Angular2removingduplicatesfromanJSONarray【发布时间】：2016-11-2421:08:41【问题描述】：当我将我的应用程序移动到Angular2时，我的JSON数组中的过滤器出现问题。在Angular1.x中，这更容易。我在... 查看详情

如何在Angular2中使用另一个组件中的变量

】如何在Angular2中使用另一个组件中的变量【英文标题】：HowtouseavariablefromacomponentinanotherinAngular2【发布时间】：2017-06-2503:32:36【问题描述】：我想知道是否可以将一个组件中的变量值使用到另一个组件中，而不必使用第一个组... 查看详情

在 Angular2 的下拉列表中显示 json 数据

】在Angular2的下拉列表中显示json数据【英文标题】：ShowjsondatainadropdowninAngular2【发布时间】：2017-10-2522:35:58【问题描述】：这是json网址：https://jsonplaceholder.typicode.com/todos这是json结构："userId":1,"id":1,"title":"delectusautautem","completed":f... 查看详情

Angular2 - 应该在模板中访问私有变量吗？

】Angular2-应该在模板中访问私有变量吗？【英文标题】：Angular2-shouldprivatevariablesbeaccessibleinthetemplate?【发布时间】：2016-04-0701:31:00【问题描述】：如果在组件类上声明了变量private，我应该能够在该组件的模板中访问它吗？@Compone... 查看详情

在 Django 模板中的 JSON 中安全地使用带有 html 的 JSON

】在Django模板中的JSON中安全地使用带有html的JSON【英文标题】：SafelyUsingJSONwithhtmlinsideoftheJSONinDjangoTemplates【发布时间】：2012-12-2618:20:45【问题描述】：如何在djangowebapp中安全地渲染JSON数据？在django的服务器上，我生成JSON数据，... 查看详情

如何在angular2和ionic2中同时保留组件的DOM元素和模板字符串

】如何在angular2和ionic2中同时保留组件的DOM元素和模板字符串【英文标题】：HowtokeepbothDOMelementsandtemplatestringofacomponentinangular2&ionic2【发布时间】：2018-03-0206:32:42【问题描述】：我使用ionic2&angular2构建应用程序，我想定义一... 查看详情

推荐一套angular2的ui模板

CoreUICoreUI是一款基于Bootstrap4的UI模板，有html、angular2,react和vue版.我是在使用angular2版本中发现其项目结构不符合angular风格指南推荐，同时感觉有一些组件其也不太支持，所以便有了一个改造它的想法。Daming-Core-UI这是我基于coreui... 查看详情