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
相关·内容
1回答
生成以下错误的ngClass指令
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'li'.
代码片段。
<li [ngClass]="{'active':true}"><a href="">Home</a></li>
注意:我已经导入了通用模块。
i
浏览 2提问于2017-06-03得票数 3
ngClass和类绑定有什么区别？
两者都接受相同的语法。我看到的唯一区别是类可以做到这一点：[class.sale]="onSale"。
两者都接受几乎相似的语法：
[ngClass]="stringExp|arrayExp|objExp"
[class]="string | Record<string, boolean | undefined | null> | Array<string>"
我已经在上面读到了一些答案。但那是几年前的事了。我想现在angular团队已经让这两种表达方式很相似了。
有人能证实这一点吗？
浏览 0提问于2021-03-22得票数 1
我以组件的形式做了一个可重用的输入，我使用ngClass设置不同的背景。在5种场景中，其中4种情况下效果很好。有一种情况是，名为"estados“的求值变量等于"pagado"，但它不会应用其相应的类。我搞不懂为什么。
HTML：
<ion-item lines="none" class="chipEstados"
[ngClass]="{colorEvaluacion: estado === 'enEvaluacion', colorAprobado: estado === 'aprobado&#
浏览 11提问于2022-01-19得票数 0
回答已采纳
当我对多个表达式和公共类一起使用ngClass时，当表达式从false变为true时，将删除公共类c1：
<span [ngClass]="{'c1 c2' : showTwo, 'c1 c3' : showThree, 'c1 c4' : showFour}" ></span>
为了克服这一问题，我必须使用标准的class属性指定公共类。
<span class="c1" [ngClass]="{'c2' : showTwo, 'c3' : s
浏览 4提问于2017-01-25得票数 5
回答已采纳
使用ngClass计算类与使用角4中的HTML属性直接计算类有什么不同。
[ngClass]="computeClass()"
和
class="{{computeClass()}}"
computeClass() {
if (condition) {
return 'class-a';
} else {
return 'class-b';
}
}
两者都返回相同的结果。这对表演有何影响？
编辑:我的问题不同于标记为重复的问题，因为它比较了ngClass和类，而上面的比较是ngClass和类之间的比较。
浏览 0提问于2018-09-28得票数 3
我在以下html上使用ngClass指令：
<i [ngClass]="{'fa fa-check': value, 'fa fa-cross':!value}"></i>
当value == false --它将fa fa-cross添加到图标中时，它非常好地工作。但是，当value == true时，它只将fa-check添加到元素中。
见。
对我哪里出错有什么想法吗？
谢谢
浏览 4提问于2016-03-17得票数 4
回答已采纳
22回答
我的Angular代码出了什么问题？我收到以下错误：
无法读取BrowserDomAdapter.removeClass处未定义的属性“”remove“”
<ol>
<li *ngClass="{active: step==='step1'}" (click)="step='step1'">Step1</li>
<li *ngClass="{active: step==='step2'}" (click)="step='step2&
浏览 154提问于2016-02-08得票数 913
回答已采纳
是否可以使用CSS或后端类型记录来切换席式字段的matInput下划线？
我已经看到了一些东西，比如，它显示了可以用css删除，例如：
::ng-deep .mat-form-field-underline {
display: none;
}
但是，我不确定这是否可以在[ngClass]中实现来切换它？
这个问题还表明，它可以通过编程完成，但是我不知道这是否是可逆的，而且我使用的是带有前缀mat的材料设计，而不是md.
@ViewChild('input') input: MdInputDirective;
ngOnInit(){
this.input.unde
浏览 0提问于2018-12-10得票数 2
3回答
我正在学习AngularJS，我看到标记"li“与具有”{ nav.estoy ( '/')}“值的ngClass指令相关联。我的问题是为什么括号内的值具有x: y. i的形式："nav.estoy ('/')是在控制器方法中定义的，但不明白为什么这个方法的响应是“：”
<body ng-app="app">
<nav ng-controller="navCtrl as nav">
<ul>
<li ng-class="{marcado: n
浏览 1提问于2016-08-27得票数 3
回答已采纳
算术表达式上null的计算结果是否为0，undefined的计算结果是否为NaN？
根据一些测试，似乎是这样的：
> null + null
0
> 4 + null
4
> undefined + undefined
NaN
> 4 + undefined
NaN
这种假设是安全的还是正确的？(文档中的引用应该是A+)。
浏览 0提问于2014-01-09得票数 18
有一个关于MySQL的COUNT()聚合函数的问题，它经常出现在我的脑海中。我想得到一些解释，为什么它是这样工作的。
当我开始使用MySQL时，我很快了解到，它的计数(条件)似乎只有在条件最后也包含OR NULL的情况下才能正常工作。在更复杂的计数条件下，这是一个经验过程，以找出它的确切位置。在MSSQL中，你不需要这个或NULL来得到正确的结果，所以我想知道它的解释。所以，这里有一个例子。
让我们有一个非常基本的表，它的结构和数据如下：
CREATE TABLE test (
`value` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET
浏览 3提问于2011-02-16得票数 6
回答已采纳
我刚接触到角，当我在网上学习一些角度代码(如何制作组件)时，我偶然发现了以下内容：
@Component({
selector: 'app-okra-button',
template: `<button [ngClass]="class" [ngStyle]="style" (click)="pay()">Init Okra</button>`,
})
但是我不理解在按钮模板中使用[ngClass]="class" [ngStyle]="style"的用法。它是
浏览 5提问于2019-10-28得票数 1
回答已采纳
6回答
当用户选择复选框或取消复选框时，我尝试在复选框和取消复选框之间切换。
为此，我使用：
<i class="far" ngClass="isItemSelected(item) ? fa-check-square : fa-square"></i>
isItemSelected(项)返回true或false
但是，即使在ui上，我也看不到复选框图标正在更改，并且从类型记录代码中传递了false值。
有人能帮我吗。
完整代码片段：
角侧：
<ng-container *ngFor="let item of
浏览 1提问于2018-02-26得票数 2
我正在完成一些JavaScript算法挑战，我不得不将一个数字作为其中的一部分进行推理。在搜索堆栈和其他位置之后，我输入了一个正确的代码块：
function factorialize(num) {
if(num === 0) {
return 1;
}
if(num < 0 ) {
return undefined;
}
for(var i = num; --i; ) {
num *= i;
}
return num;
}
factorialize(5);
它返回一个
浏览 5提问于2016-08-03得票数 3
回答已采纳
我想添加一个带有单击事件的类，我使用的是angular ngClass，但它对我不起作用。当您单击"li“元素时，它会调用一个函数来更改"isExpandedConectivity”变量的值，但什么也不做。 Component.html： <li class="nav-item" (click)="changeCollapsed()" aria-controls="collapseUsuarios">
<a href="#" class="nav-link
浏览 17提问于2019-09-09得票数 0
回答已采纳
3回答
每当选中复选框时，我都会尝试将一个类"isChecked“添加到父div。为此，我尝试使用ngClass指令。
HTML
<div ng-class="{isChecked: (isChecked_1 == 'true')}">
<input type="checkbox" id="check_1" ng-model="isChecked_1" />
<label class="label_1" for="check_1"
浏览 1提问于2014-06-10得票数 0
回答已采纳
在角1.x中，以下代码的工作原理是我想要单击和翻转ng-重复中的卡片
<div class="card" ng-repeat="let card of cards">
<div class="flipcard" ng-class="{'flipped':isflipped}" ng-click="isflipped = !isflipped">
</div>
</div>
然而，在角2当点击，它翻转每一个“卡”在ngFor循环.如何仅将ngClass条
浏览 0提问于2016-07-25得票数 5
回答已采纳
1回答
有可能在角质表的第一列上加一个投影吗？
我尝试过几种方法：：ng深度或添加类，但没有成功。
下面是我的基本代码。通过CSS的右边框显示在第一列的表中，而不是阴影。当我开始向右滚动时，边框就消失了(我的第一栏很粘)。
我想添加一个下降阴影到第一栏，这将不会被删除的滚动。
CSS
.column-shadow {
border-right: 1px solid $af-pinkish-grey !important;
box-shadow: 3px 3px 5px rgba(68, 68, 68, 0.6) !important;
}
<!-- action buttons --&
浏览 1提问于2021-10-24得票数 0
例如
MyClass = Class.new(Object)
a = MyClass.new
unless a
puts "executed"
end
我知道nil和false是在Ruby中计算为false的唯一两个值。但是我也需要评估MyClass的实例。有可能这样做吗？
nil和false是在Ruby中计算为false的唯一两个值。
我还想找出它在中的定义
我知道这种用法是不常见的，我想这样做的原因是：
浏览 13提问于2022-11-30得票数 0
5回答
假设我在数组中有一些对象(让我们调用数组"items")，比如{ title: "Title", value: true }，我使用ngFor来显示它们：
<h1 *ngFor="let item of items">{{ item.title }}</h1>
现在假设我想根据h1是真还是假在item.value上显示一个类。我怎么能这么做？
我不能添加[class.some-class]="{{ item.value }}"。基本上，如何才能将当前项的真假值转换为类似于ngClass的内容？我是不是错过了
浏览 8提问于2016-09-15得票数 9
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
