开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular 2 ngClass在检查条件时不计算我的表达式

Angular 2中的ngClass指令用于动态地添加或移除HTML元素的CSS类。它可以根据条件来决定是否添加某个CSS类。

在使用ngClass时，如果条件表达式不被计算，可能是由于以下几个原因：

表达式错误：请确保表达式语法正确，没有拼写错误或语法错误。可以通过在控制台查看错误消息来检查表达式是否正确。
表达式未绑定到组件属性：ngClass的条件表达式应该绑定到组件的属性，以便在属性值发生变化时触发表达式的重新计算。请确保将表达式绑定到组件的属性。
表达式计算结果为undefined或null：如果表达式计算结果为undefined或null，ngClass将不会添加任何CSS类。请确保表达式计算结果不为undefined或null。
表达式计算结果为布尔值：ngClass的条件表达式应该返回一个布尔值，以决定是否添加CSS类。如果表达式计算结果不是布尔值，ngClass将不会添加任何CSS类。
表达式计算结果为对象：ngClass还支持表达式计算结果为对象的情况。如果表达式计算结果是一个对象，ngClass将根据对象的键值对来决定是否添加CSS类。请确保表达式计算结果是一个对象，并且对象的键是CSS类名，值是布尔值。

总结起来，当Angular 2中的ngClass在检查条件时不计算你的表达式时，你应该检查表达式的语法是否正确，是否绑定到组件的属性，以及表达式的计算结果是否为布尔值或对象。

关于Angular 2的ngClass更详细的信息和示例，你可以参考腾讯云的Angular 2开发文档：Angular 2开发文档 - ngClass

相关搜索:Angular 2，在ngFor中使用带条件句的ngClass Angular2 -在检查时将检查的值推送到数组 Angular:在ngOnInit()中，当我重新加载组件时，我的rxjs函数不运行 Sympy演算:在计算渐近表达式时，python将log(2)和e^0.3作为符号输出，而不是计算它们的值为什么我的代码在使用if else条件创建2x3矩阵时不能正常工作从Postman点击时，我可以在不进行身份验证的情况下访问数据，但为什么不能使用angular 2应用程序在angular 2中使用正则表达式时出错，模块分析失败:严格模式下的八进制文字在我使用python tkinter的计算器GUI中，当我再次编写表达式时，entry小部件中的'Error‘消息不会自动删除在我的angular 2应用程序中使用JWT并将其存储在localStorage中。但是，当该项目不存在时，我该如何处理？在更新时，我的where条件不工作

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Angular 6.x 基础教程

-is 即 Angular CLI 在创建组件时，自动帮我们添加了前缀。...，若我们改变绑定的表达式为 (click)="onClick(myInput)" ，当我们点击按钮时，控制台输出的结果是：通过该输出结果，我们可以知道 #variableName...)">点击当 Angular 在调用我们的事件处理函数时，会自动帮我们处理调用的参数。...第十节 - 组件样式在 Angular 中，我们可以在设置组件元数据时通过 styles 或 styleUrls 属性，来设置组件的内联样式和外联样式。...用过 AngularJS 1.x 的同学，对 ng-class 应该很熟悉，通过它我们能够根据条件，为元素动态的添加或移除对应的样式。在 Angular 中，对应的指令是 ngClass 。

15.6K2 0

AngularDart4.0 指南- 模板语法一顶

表达式应该快速完成，否则用户可能会遇到卡帧，尤其是在较慢的设备上。当他们的计算成本很高时，考虑缓存值。简单虽然可以编写相当复杂的模板表达式，但是应该避免使用它们。...对Angular来说，一个幂等表达式总是返回完全相同的东西，直到它的一个依赖值发生变化。在事件循环的一个回合期间，依赖值不应该改变。...在检查模式下，如果模板表达结果类型和目标属性类型不是赋值兼容的，则会抛出一个类型异常。... --> 检查模式类型异常例子在检查模式下，上面的代码将导致一个类型异常：String不是Hero的子类型...一次性字符串初始化满足以下所有条件时，省略括号：目标属性接受一个字符串值。该字符串是一个固定的值，您可以拷贝到模板中。这个初始值永远不会改变。

5.1K1 0

Angular 2 + 折腾记：(2)初步认识angular2，不一样的开发模式

---- 基础概念国内的官网--基础词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法，相当于一本小字典关于ng2的一堆为什么:...， |是管道，支持多个管道，支持内置管道和自定义管道，:跟随是管道的参数，后续文档我写一个如何自定义管道的文章 []="":绑定组件内的值[单向，数据流向视图]，指令，原生html控件的自身属性[value...,src,class,style]等，双引号内支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量， (click)="": 事件绑定[视图触发改变数据源]，同上，支持表达式和方法。。...绑定赋值的条件表达式的特殊之处：不支持：赋值 (=, +=, -=, ...) new运算符使用;或,的链式表达式 自增或自减操作符 (++和--) 不支持位运算|和& 支持：逻辑运算(...b : 会判断item是否有a这个值，防止undefined或者null让视图渲染报错 ---- 最最最常用的内置指令样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象

6.2K2 0

AngularDart4.0 指南- 模板语法二顶

当模板表达式计算结果为true时，Angular会添加类。当表达式为false时，它将删除类。 This one is not so special 虽然这是切换单个类名的好方法，但是在同时管理多个类名时通常首选NgClass指令。...这些元素的所有组件都保留在内存中，Angular可能会继续检查更改。您的应用可能会占用相当可观的计算资源，会降低用户不可见的性能。...它可以根据切换条件从几个可能的元素中显示一个元素。 Angular只把选中的元素放入DOM中。...想象一下，在诸如a.b.c.d这样的长属性路径中的某个地方防止空值。 Angular安全导航操作符（?.）是一种更为流畅和方便的方法来防止在属性路径中出现空。表达式在达到第一个空值时会被释放。

29.9K2 0

Angular 2.x折腾记：(2)初步认识angular2，不一样的开发模式

，ng2的开发模式就是类似一个树，从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块，比如你要在组件内用到一些表单元素或者数据绑定...， |是管道，支持多个管道，支持内置管道和自定义管道，:跟随是管道的参数，后续文档我写一个如何自定义管道的文章 []="":绑定组件内的值[单向，数据流向视图]，指令，原生html控件的自身属性[value...,src,class,style]等，双引号内支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量， (click)="": 事件绑定[视图触发改变数据源]，同上，支持表达式和方,特殊之处后面解释...绑定赋值的条件表达式的特殊之处：不支持：赋值 (=, +=, -=, ...)...b : 会判断item是否有a这个值，防止undefined或者null让视图渲染报错最常用的内置指令样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象，用来动态判断增加多个样式

921 0

Angular核心概念：数据绑定

（达内教育学习笔记）仅供学习交流 Angular数据绑定 Angular核心概念：数据绑定（1）HTML绑定：{{NG表达式}}（2）属性绑定（3）指令绑定（4）事件绑定()（5）双向数据绑定指令...:[（ngModel）]---重点 Angular核心概念：数据绑定（1）HTML绑定：{{NG表达式}} （2）属性绑定（3）指令绑定（4）事件绑定() （5）双向数据绑定指令:[（ngModel...）]---重点（1）HTML绑定：{{NG表达式}} 效果图：在该组件的ts文件添加 export class MyC02Component{ uname = '叮当' age...4.样式绑定：[ngClass] 说明：ngClass绑定的值必须是一个对象！...--Angular专用事件：“模型数据改变”ngModelChange-->> 当前的用户绑定{{uname}} ts文件改变值打印在控制台上 uname="dingding";

3.5K1 0

Angular: 最佳实践

Note: 本文中，我将尽量避免官方在 Angular Style Guide 提及的模式和有用的实践，而是专注我自己的经验得出的东西，我将用例子来说明。...并且在模版中的每个地方都会显示通知，你可以使用 ngClass 设置未通知的样式。现在，我们想将通知的状态与枚举值进行比较，我们必须将枚举导入组件。...从模版到组件方法的委托比原始的逻辑更难。请注意，这里我用了比原始更难的词语，而不是复杂这个词。这是因为除了检查直接的条件语句之外，任何逻辑都应该写在组件的类方法中，而不是写在模版中。...在模版中写 *ngIf=”someVariable === 1” 是可以的，其他很长的判断条件就不应该出现在模版中。...读者可能意识到我并没有写关于 Directives 和 Pipes 的相关内容，那是因为我想写篇详细的文章，关于 Angular 中 DOM 是怎么工作的。

2.8K4 0

Angular 从入坑到挖坑 - 组件食用指南

，可以通过 angular 内置的模板语法与 html 元素进行结合，从而告诉 angular 如何根据我们的应用逻辑和数据来渲染页面 4.1.2.1、插值表达式 插值表达式可以将组件中的属性值或者是模板上的数据通过模板表达式运算符进行计算...模板表达式的变量来源模板本身的变量指令的上下文变量组件的成员信息（属性 or 方法）在使用模板表达式时，如果变量名在多个来源中都存在的话，则模板变量是最优先的，其次是指令的上下文变量，最后是组件的成员...在使用模板表达式时应该遵循如下的原则简单：正常情况下，应该将业务逻辑或是数据运算放到组件中，模板表达式只作为属性或方法的调用快速执行：模板表达式得出的数据应该快速结束，否则就会对于用户体验造成影响...通过在模板表达式中使用管道运算符（|）则可以完成相应的结果转换 4.3.1、模板表达式中的特殊运算符 angular 模板表达式是 javascript 的子集，相对于常见的 javascript 运算符...非空断言运算符用来告诉编译器对特定的属性不做严格的空值校验，当属性值为 null or undefined 时，不抛错误。

15.8K3 0

Angular学习笔记（一）

指令 Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行转换。服务服务是一个广义范畴，包括：值、函数，或应用所需的特性。...Angular 使用依赖注入来提供新组件以及组件所需的服务。 2. 模板与数据绑定绑定的类型可以根据数据流的方向分成三类：从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。...生命周期 ngOnChanges() 当 Angular 重新设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 SimpleChanges 对象。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用，只调用一次。...ngOnDestroy 在 Angular 销毁指令/组件之前调用。

3.3K2 0

todoMVC_mvc框架是什么

大家好，又见面了，我是你们的朋友全栈君。...生命周期钩子函数 // 它会在angular应用初始话的时候执行一次 ngOnInit() { window.onhashchange = () => { this.hashChangeHandler...= this.hashChangeHandler.bind(this) } } // 当angular组件数据发生改变的时候，ngDoCheck钩子被触发 // 在钩子函数中持久化数据 ngDoCheck...提供一个属性，该属性会根据当前点击的连接返回过滤后的数据 filterTodos // 2....本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

7561 0

NG2.4.10升级NG4正式版：修正AOT打包报错的一些问题

很多小伙伴迫不及待的把项目升级了。。。然后到群里各种吼，无损升级，没有什么奇葩问题，大家放心升级。。我信了。。。把公司的项目给升级了，然后就开始掉坑了。。。...普通的开发模式和打包模式皆正常，不正常的是AOT打包。。 ---- 问题汇总升级后第一次打包吓死我了，各种错误超过150条。。。部分效果图 ? 初步汇总后基本分为这三类，且看我道来。。。...解决方案：任何[(ngModel)]的变量必须在组件内声明全局变量也必须在组件内声明，比如你在html中写了这种表达式(click)="temp = $event" , temp必须声明 ----...具体去看最新的api（v4）和老版本api(v2)的比较-- 解决方案：使用get来获取嵌套表单的响应值,新的写法比较直观也好维护，嘎嘎,看代码 // 旧版本。2.4.10及以下可以生效的。。...小伙伴们代码还是严谨些好 closeHandler(e) { this.close.emit(null); } }复制代码 ---- 总结不吹不黑，v4打包后的提交明细小了很多，少了一半以上啊

3931 0

Angular 组件样式

ngClass 通常情况下，要为某个元素添加指定样式，我们可以直接这样做：提交但某些时候我们需要根据不同的条件，为指定元素应用不同的样式...传递给 ngClass 指令的表达式的数据类型可以是：对象、数组或字符串。...接下来让我们来分别看一下具体的使用示例：传递样式数组提交 Angular 将会接收传递给 ngClass...true }"> 提交样式配置对象的键为样式类的名称，而对应的值是布尔值或布尔表达式，即用于表示是否应用对应的样式类。...blue-button { background:blue; } `] }) export class BlueButtonComponent { } 之后，我们在根组件中使用新建的

1.9K3 0

ng 核心模块

我可以指定多个src对象。如果你想要保留原始的对象，你可以通过一个空的目标对象实现：var object = angular.extend({}, object1, object2)。...注意：记住angular.extend不支持递归合并（深度copy）。 angular.noop 这个函数不执行任何的操作。这个函数可以用于当需要一个函数风格的代码时。...使用Angular 标记例如{{hash}}在一个src属性中不能正确工作：浏览器将从带有{{hash}}的URL中获取资源直到Angular替换了这个表达式。使用ngSrc指令可以解决这个问题。...使用Angular 标记例如{{hash}}在一个srcset属性中不能正确工作：浏览器将从带有{{hash}}的URL中获取资源直到Angular替换了这个表达式。...如果元素上的ngDisabled表达式计算后得出真，这个指令将设置disabled指令到元素上 ngChecked The HTML specification does not require browsers

1.2K1 0

AngularDart4.0 指南- 表单顶

在开发表单时，创建一个数据录入体验非常重要，该体验可以通过工作流高效地引导用户。...您可以创造性地设计控件，将它们绑定到数据，指定验证规则和显示验证错误，有条件地启用或禁用特定控件，触发内置的视觉反馈等等。 Angular通过许多重复的，模板化的任务使处理过程变得简单。...在Alter Ego和Hero Power上添加类似的[（ngModel）]绑定和ngControl指令。用model替换诊断绑定表达式。通过这种方式，您可以确认双向数据绑定适用于整个英雄模型。...每个Angular控制（NgControl）都跟踪自己的状态，并通过以下字段成员使状态可供检查： dirty和pristine表明控制的值是否已经改变。...'is-valid' : 'is-invalid'; return {validityClass: true}; } 使用此方法返回的映射值绑定到NgClass指令 - 在模板语法页面中详细了解此指令及其替代方法

17.4K3 0

AngularDart 4.0 高级-结构指令顶

您将在本指南中学习到星号（*）是一种便利的符号，字符串是一种微型语法，而不是通常的模板表达式。 Angular将这个符号解析成一个围绕宿主元素及其后代的标记。...当条件为false时，NgIf从DOM中删除它的宿主元素，将它从DOM事件（它所依附的）中分离出来，将组件从Angular变化检测中分离出来并销毁它。组件和DOM节点可以被垃圾收集并释放内存。...满足Angular模板中的类似需求。编写一个结构指令在本节中，您将编写一个与NgIf相反的UnlessDirective结构指令。 NgIf在条件为true时显示模板内容。...UnlessDirective在条件为false时显示内容。... 当条件为假时，出现顶部(A)段落并且底部(B)段落消失。条件为真时，顶部(A)段被删除，底部(B)段出现。 ? 概要您可以尝试在实例中查看本指南的源代码（查看源代码）。

16K2 0

angular入门教程_初学者织围巾简单教程慢动作

尤其是2016年，这一整年的时间我都代表 Angular 项目组在中国进行技术推广。在这5年，我在超过40家企业、开源组织、大学里面进行了大量演讲，在网络上发布了大量的视频和文章。...因为你迟早会发现，在计算机领域，任何东西研究到最底层都和“算法”、“数据结构”、“设计模式”有关。而就我所知，很多朋友并不具备研究这些内容的基础知识，不过是白白浪费自己的时间而已。...否则，请使用 cnpm 来安装 @angular/cli，原因有三：1、cnpm 的缓存服务器在国内，你装东西的速度会快很多；2、用 cnpm 可以帮你避开某些模块装不上的问题，因为它在服务器上面做了缓存...第2-1课：组件：概述几乎所有前端框架都在玩“组件化”，而且最近都不约而同地选择了“标签化”这种思路，Angular 也不例外。...关于 Mustache 语法，你需要掌握3点：它可以获取到组件里面定义的属性值。它可以自动计算简单的数学表达式，例如：加减乘除、取模。它可以获得方法的返回值。

3.3K2 0

Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）

主要是因为前段时间写过一些关于Angualr的相关实战文章，有些爱学习的小伙伴对这方面比较感兴趣，但是又不知道该怎么入手（因为认识我的大多数小伙伴都是后端的同学），所以今天准备出一篇Angular学习资料汇总和日常开发中使用比较频繁的语法总结...规定要使用模板替换的文本内容 ng-blur 规定 blur 事件的行为 ng-change 规定在内容改变时要执行的表达式 ng-checked 规定元素是否被选中 ng-class 指定 HTML...HTML 元素 ng-href 为 the 元素指定链接 ng-if 如果条件为 false 移除 HTML 元素 ng-include 在应用中包含 HTML 文件 ng-init 定义应用的初始化值...规定鼠标指针穿过元素时的行为 ng-mouseleave 规定鼠标指针离开元素时的行为 ng-mousemove 规定鼠标指针在指定的元素中移动时的行为 ng-mouseover 规定鼠标指针位于元素上方时的行为...指定元素的 srcset 属性 ng-style 指定元素的 style 属性 ng-submit 规定 onsubmit 事件发生时执行的表达式 ng-switch 规定显示或隐藏子元素的条件

5.3K4 1

浅谈Angular

Angular里的数据绑定: 1.插值表达式 {{}}--括号里可填表达式,不能填语句!...类绑定 [class]='表达式' [class.类名]='布尔值' [ngClass]=对象 3.style样式绑定...当前比特币的价格是:{{5000.123456 | currency:'JPY':true:'5.1-4'}} 5.Angular里路径传值: 参数订阅(RxJS) 遇到的问题:数据不会及时更新,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件不销毁,init方法不会再走,导致当前数据无法更新解决办法...,要声明在子组件里 2.子向父 -- @Output装饰器声明事件,要声明在子组件里 3.兄弟之间 -- 中间人模式拓展:事件源对象在事件中，当前操作的那个元素就是事件源。

4.4K1 0

Angular 中的数据绑定

我们在表单控件中使用[(ngModel)] 样式绑定：为 HTML 元素动态设定 CSS 行内样式，我们使用 [style.style-property]="value" 类名绑定：基于条件或者组件属性...插值和属性绑定在 Angular 中，插值 Interpolation 和属性 Property 绑定都用来传递组件类数据到模板（视图）中。嗯～区别是它们怎么实现这个任务，我们在哪里使用它们。...下面是 Angular 中 Interpolation 插值绑定和 Property 绑定的主要区别：语法 Interpolation 绑定：插值绑定在模板 HTML 内容中，使用{{}}来包含表达式或者变量...表达式 vs 属性 Interpolation 绑定：它是为单个表达式或者变量而设计的。你不可以使用它绑定属性，只能用来显示动态内容。 Property 绑定：它允许你直接绑定元素属性。...两者在 Angular 应用中都很重要，我们根据使用场景来选择使用。事件绑定事件绑定允许我们将事件（比如按键、点击、悬停、触摸等）绑定到数组中的一个方法。它是从视图到组件的单向绑定。

1551 0

angular 模板常用语法

结构指令 1.1 条件 extport class AppComponent { flag = true; } xxxx red 根据表达式动态绑定类 red 2.2.2...type="text" [value]="msg" (input)="msg=$event.target.value"> 自动使用表单模块，导入import {FormsModule} from ‘@angular.../forms’; 自定义组件属性修改属性的同时触发属性修改事件 <input type="text"...标签引用 <button (click)="field<em>2</em>.value=field1

1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭