如何使用变量作为ngClass的值？
在Angular中，可以使用变量作为ngClass的值来动态地添加或移除CSS类。下面是使用变量作为ngClass值的步骤：
- 在组件中定义一个变量，用于控制CSS类的添加和移除。例如，可以在组件的属性中定义一个布尔类型的变量，如
isActive。 - 在模板中使用
ngClass指令，并将变量作为其值。可以使用以下语法： - 在模板中使用
ngClass指令，并将变量作为其值。可以使用以下语法： - 在上述示例中，当
isActive为true时，将添加active类，当isActive为false时，将添加inactive类。 - 可以根据需要添加更多的CSS类。例如，可以使用以下语法添加多个类：
- 可以根据需要添加更多的CSS类。例如，可以使用以下语法添加多个类：
- 在上述示例中，根据条件
condition1、condition2和condition3的值，将添加或移除相应的类。 - 可以使用表达式来计算变量的值。例如，可以在组件中定义一个方法，根据某些条件返回布尔值，并将该方法的返回值作为变量的值。例如：
- 可以使用表达式来计算变量的值。例如，可以在组件中定义一个方法，根据某些条件返回布尔值，并将该方法的返回值作为变量的值。例如：
- 在上述示例中，
isActive()方法返回true或false，根据其返回值来添加或移除active类。
总结起来，使用变量作为ngClass的值的步骤如下：
- 定义一个变量来控制CSS类的添加和移除。
- 在模板中使用
[ngClass]指令，并将变量作为其值。 - 根据变量的值来添加或移除相应的CSS类。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBCS）：https://cloud.tencent.com/product/tbcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
1回答
如何使用变量作为ngClass的值？
angular、typescript、ng-class
我正在尝试制作情态，所以当我点击每个按钮时，不同的情态应该会出现，里面有不同的内容。单击按钮时，active的值为true，当active为true时，modal div获取类.open。button type="button" class="btn btn-4" (click)="myFunction(0)">ბანკი</button>
<div class="modal" [ngClas
浏览 16提问于2021-04-03得票数 0
回答已采纳
1回答
在ngClass for className中使用ngClass作用域变量作为变量
angular、dynamic、interpolation、ngfor
我试图实现的是使用ngFor作用域变量的值作为标签类的动态更改类。下面是我的代码： <li [formGroup]="nestedForm" *ngFor="let type oftype"
(change)="onCheckStateCh
浏览 4提问于2022-06-09得票数 0
回答已采纳
3回答
角ngIf 2属性为真添加类条件
angular
在我的html组件上，我需要检查2属性是否等于true，如果是，则需要添加一个类。<button [attr.two]="..."
浏览 0提问于2021-07-20得票数 0
回答已采纳
1回答
路由器链接活动不能在下面的场景中工作，他们是否有任何其他的方式来动态激活按钮？
css、angular、typescript
important;我正在尝试使用路由器链接活动更改活动按钮的颜色，但这种方法在这种情况下不起作用，是它们根据当前单击动态添加类的任何替代方法。
浏览 1提问于2018-05-11得票数 0
回答已采纳
1回答
ngClass -从变量应用多个类？
angular、ng-class
我试图通过ngClass应用多个类。没有条件。我有两个变量，它们是类名的字符串。[ngClass]='variable1?.font'[ngClass]="['btn', 'btn-primary']" [<e
浏览 1提问于2019-08-16得票数 1
回答已采纳
3回答
如何在angular4中启用和禁用快捷键上的图标
javascript、angular
下面是我的输入字段，我在这个输入表单中有一个带有背景图像十字(X)的类( form --cross)。我想隐藏/显示基于快捷键的十字图标(Class =“form-- cross”)，但我不知道如何在angular4中做到这一点。
浏览 0提问于2018-02-08得票数 0
4回答
ngClass没有在我的角度项目中工作
html、angularjs、angular、typescript、ng-class
我正在尝试创建一个带有验证的表单，并使用下面的接口来定义FieldError。export interface FieldError { errorMessage: string;在我的component.html中，我使用[ngClass]来检查我想要使用的FieldError.errorAt === 'first_name'是否要使用text-danger，如果不是，我想要
浏览 1提问于2020-07-21得票数 1
回答已采纳
1回答
使用变量动态获取对象属性
angular、typescript
我有个像这样的东西 ...Return 'myclass';模板如下所示 <i [ngClass]="getRAG(item.Financials)">但在上面的模板中，我指定了所需<
浏览 1提问于2021-10-26得票数 0
3回答
带if的角5 ngClass
angular
这是表中一行的代码ngClass="device.onlineState == 'Offline' ?'highlight&#x
浏览 0提问于2018-03-28得票数 2
回答已采纳
1回答
添加背景CSS的模糊输入字段的角度类型记录不起作用
css、angular、typescript
角形类型脚本，当我在输入字段上输入值时，当我将CSS添加到输入字段后，背景变化，但是它不能正常工作，有人知道如何正确吗？
浏览 0提问于2022-10-06得票数 -1
1回答
如何将布尔变量按角度添加到ngClass中？动态创建div时
javascript、angular
我需要每个div有它自己的变量，所以我可以翻转一个变量而不影响其他div。而且，我也不能使用jquery。我知道在vanilla中使用香草javascript不是最好的做法。'box' : 'hide'">{{1}}</div>
<div [ngClass]="_________ ?'box' : 'hide'">{{2}
浏览 3提问于2022-07-14得票数 0
2回答
具有三种不同状态的ngClass
angular、ng-class
我不知道这是不是最愚蠢的方法，但你必须在某个时候开始，这似乎是一种方法。 不管怎样，我已经创建了一个div盒子。单击按钮时会出现此框，即此单击会将类添加到框中。this.getTotalIndex (firstIndex, secondIndex);
} 这只是我获取每个单独项目/ID的状态的一种方法但同样，我还有另外两个具有类似功能的按钮(只是名称不同)。(我不能去工作，而且它看起来也很糟糕)是div box HTML，它现在看起来像：
浏览 56提问于2020-08-21得票数 2
回答已采纳
2回答
带有方法调用和变量的NgClass中的数组
angular、ng-class
我想通过一个方法调用来使用[ngClass]，该方法调用返回一个像{currentWeek: true}这样的对象，并且我想添加可以具有值rejected的var week.state。我希望超文本标记语言看起来像这样：<div class="currentWeek rejected"></div>，但当我使用它时，我得到了这个错误：
Error in ./FlexCalendar class FlexCalendar -
浏览 0提问于2017-01-09得票数 7
回答已采纳
2回答
根据角度6的可变变化改变html5类？
angular
如何根据模型中变量中指定的值在html元素中添加/删除类。例如，在我的角组件中有一个value变量： value: number = 6;}现在，基于值(通常通过事件侦听器更新)，当条件为真时，我想添加/删除html元素中的类：
<div [ngClass]="value >
浏览 2提问于2018-10-28得票数 4
回答已采纳
3回答
在模板外部上下文中访问ngFor变量
angular
考虑以下代码： <div *ngFor="let var of vars">{{var.text}}</div>这将失败，因为仅在ngFor循环上下文内限定var的范围。有没有可能把它包含在某个模板变量中，或者被任何其他黑客攻击？
注意:我知道，这是设计上的行为，上面的代码被简化了(需要在几层以上使用var)。
浏览 4提问于2018-05-30得票数 1
5回答
角2插值对ngClass的增加值
angular、ng-class
假设我在数组中有一些对象(让我们调用数组"items")，比如{ title: "Title", value: true }，我使用ngFor来显示它们：
<h1 *ngFor="let item of基本上，如何才能将当前项的真假值转换为类似于ngClass的内容？我是不是错过了一个明显的方法在角度2做这件事？(顺便说一句，我知道我可以通过将class="{{ item.value | pipe }}&
浏览 8提问于2016-09-15得票数 9
回答已采纳
1回答
如何在角度上同时使用ngModel和ngClass
angular
我使用下面的代码在角6与Visual代码 <label class="switch"> </label>
</div
浏览 0提问于2021-09-24得票数 0
回答已采纳
2回答
Angular 2如何使用ngClass的值的变量
angular、ng-class
我想使用一个变量来表示将添加到类列表中的ngClass的值。我的用例是我有一个图像精灵的集合，有一个基础的精灵，然后是一个活动状态，它具有与基础精灵相同的文件名，只是在末尾添加了'- active‘。我通过赋予一个元素一个与所需的sprites文件名匹配的类来将sprites添加到文档中。当用户将鼠标悬停在元素上时，我需要在两个sprites之间来回切换。我该怎么做？例如
浏览 0提问于2016-12-02得票数 6
1回答
ngClass布尔表达式获取模板解析错误
angular、typescript、momentjs、angular7
我想检查一下，一个矩日期是否是当前的一天。这不起作用，我也不知道为什么会有这个错误。我认为误差是因为角度。<div class="timeline-date" [ngClass]="{'current-date': date.isSame{{date.format("MMM Do")}}错误：
未知错误:模板解析错误:解析器错误:缺少预期)，在{“
浏览 0提问于2019-01-09得票数 1
回答已采纳
1回答
如何将angular中的类名从component.ts传递给html SVG
javascript、angular、svg
我使用d3来创建图表，每个图表都必须有一个唯一的id。所以我需要使用类似这样的东西： <svg class="{{className}}"></svg> 在component.ts中定义了className，但这不起作用 当我对值进行硬编码时，它可以工作，但是当我在值中传入类名时，它就不工作了
浏览 17提问于2018-12-17得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
