如何使用变量作为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
相关·内容
我需要动态地创建div。我需要每个div有它自己的变量，所以我可以翻转一个变量而不影响其他div。而且，我也不能使用jquery。我知道在vanilla中使用香草javascript不是最好的做法。
例如，html代码：
<div *ngFor="let n of numbers">
<div [ngClass]="____ ? 'box' : 'hide'">{{n}}</div>
</div>
以及打字本代码：
numbers: string[] = ['0
浏览 3提问于2022-07-14得票数 0
我刚接触到角，当我在网上学习一些角度代码(如何制作组件)时，我偶然发现了以下内容：
@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
回答已采纳
我想通过一个方法调用来使用[ngClass]，该方法调用返回一个像{currentWeek: true}这样的对象，并且我想添加可以具有值rejected的var week.state。
我希望超文本标记语言看起来像这样：<div class="currentWeek rejected"></div>，但当我使用它时，我得到了这个错误：
Error in ./FlexCalendar class FlexCalendar - inline template:29:13 caused by: NgClass can only toggle CSS clas
浏览 0提问于2017-01-09得票数 7
回答已采纳
我希望在一个按钮中显示不同的文本，这取决于一些JSON数据。
示例(当然不起作用)：
<button [innerHTML]='"Male" if user.gender==1 else "Female"'></button>
我知道这个功能已经存在于ngClass中
<button [ngClass]='{"btn-success": data.complete, "btn-primary": !data.complete}'>Some text</but
浏览 5提问于2016-10-18得票数 5
回答已采纳
我试图在ngFor中传递带有索引的ngClass，以激活正确的类。我尝试过不同的方法，但我没有成功。
下面是代码：
<td *ngFor="let cell of row; let i = index" [ngClass]="{'col-tb-1-active' : classFocus.col1 , 'col-tb-1' : !classFocus.col1}">{{ cell.value }}</td>
在这种情况下，如果它有"1"，我想要更改索引。会是这样的：
<td *ngFo
浏览 3提问于2019-02-12得票数 1
回答已采纳
1回答
我有个像这样的东西
var item={"Financials":0,"Risk":3,"Issue":2,"Milestone":1};
getRAG(n:number):string{
...
...
Return 'myclass';
}
模板如下所示
<div>
<i [ngClass]="getRAG(item.Financials)">
</div>
但在上面的模板中，我指定了所需的值，即item.Financials。
因此，我将模
浏览 1提问于2021-10-26得票数 0
我正在构建一个带有价格的日历，我有3个嵌套元素：
- calendar-layout
-- calendar-month
--- calendar-week
在日历周中，我必须对每天可能具有的不同样式进行几次计算，
// Calendar-week Html
<div [ngClass]="dayClass(date, i)" *ngFor="let date of days; let i = index;"
(click)="onClick(date)" [class.not-selectable]=&#
浏览 2提问于2020-05-22得票数 1
3回答
将菜单状态更改为角8中的活动状态
、、、、
我是新的角度，我试图改变我的按钮在肚脐状态，考虑到导航路线，但当点击我的按钮，我选择所有其他按钮，包括按钮按下。
这里有我的方法，我在按钮上调用它：
private status = false;
selectOnMenu(event) {
const urlBase = this.location.path();
if (urlBase === '/documents/index/my') {
this.status = !this.status;
} else if (urlBase === '/documents/ind
浏览 1提问于2020-02-07得票数 0
回答已采纳
2回答
请帮个忙，不知道为什么ngClass不能应用
[ngClass]="{'active': isActive,'can-toggle':canToggle}"
浏览 14提问于2020-05-26得票数 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
回答已采纳
如何更改图标的颜色？
使用ngClass是最好的选择吗？
到目前为止，我所做的就是给我的图标分配一个类。
<ion-card>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="eye" #name [ngClass]="{
'isActive' : isActive}" (cl
浏览 0提问于2019-06-29得票数 0
2回答
我是angular 6的新人，目前正在做angular 6项目。我遇到了这样一种情况:我需要对数据进行归档，但我在保留原始对象时遇到了问题。下面是代码： this.loginService.categoryType$.subscribe((data) => {
for(var i=0; i<this.listPosts.length; i++){
if(this.listPosts[i]['categoryName'] == data){
}else{
this.listPosts.splice(i
浏览 20提问于2019-04-07得票数 1
我试图根据路由(/home)更改div类
我以为这能起作用：
[ngClass]="{'background_image':router.url === '/home'}
但它似乎没有我想要的效果。
我是否需要将路由传递到一个变量中，并通过ngClass提供它呢？
我在网上找不到任何解决这个问题的办法。
浏览 6提问于2022-08-19得票数 0
回答已采纳
3回答
我试着做一些看起来应该很简单的事情，但是我找不到该怎么做，而且它似乎不在文档里。下面是一个简单的例子：
<div *ngFor="let card of cards | async">
<div [ngClass]="{card.color : true}">
</div>
</div>
我能做[ngClass]="[card.color]"或[ngClass]="{'red' : true}"
然而，一旦我尝试将两者结合起来，我就会得到以下错误：Pa
浏览 1提问于2018-07-17得票数 1
回答已采纳
4回答
我正在尝试创建一个带有验证的表单，并使用下面的接口来定义FieldError。
export interface FieldError {
errorAt: string;
errorMessage: string;
}
在我的component.html中，我使用[ngClass]来检查我想要使用的FieldError.errorAt === 'first_name'是否要使用text-danger，如果不是，我想要使用text-muted。
如下所示
<div class="form-group text-left">
<l
浏览 1提问于2020-07-21得票数 1
回答已采纳
2回答
我在玩ngClass，我不知道我做错了什么。它表现出了奇怪的行为。当我将一个函数赋值给ngClass时，它似乎不起作用，但是如果我给它分配一个对象文字，它就能工作。如何让ngClass使用组件的函数？
ProposalForm.ts
import {Component} from 'angular2/core';
import {NgClass} from 'angular2/common';
@Component({
selector: 'proposal-form',
template: `
<div [ngClas
浏览 2提问于2016-03-09得票数 3
回答已采纳
使用ngClass计算类与使用角4中的HTML属性直接计算类有什么不同。
[ngClass]="computeClass()"
和
class="{{computeClass()}}"
computeClass() {
if (condition) {
return 'class-a';
} else {
return 'class-b';
}
}
两者都返回相同的结果。这对表演有何影响？
编辑:我的问题不同于标记为重复的问题，因为它比较了ngClass和类，而上面的比较是ngClass和类之间的比较。
浏览 0提问于2018-09-28得票数 3
4回答
我正在开发一个angular应用程序。当我的标志为真时，我想有条件地改变正文的背景颜色。在我的css中，我有以下内容
body {
backgraound-color: blue;
}
现在，此颜色应用于整个页面。但是当我的标志为true时，我想改变页面的背景颜色。通常，当我必须有条件地更改背景颜色时，我会使用ngClass，但在这种情况下，我不知道如何在body上应用ngClass。我怎样才能有条件地改变身体的背景颜色？
浏览 1提问于2020-08-24得票数 1
4回答
我已经开发了一个角2应用程序，在这个应用程序中，我试图使用ngClass应用一个CSS类。我已经将类名存储在变量className中，并尝试在下面的代码中应用：
第一条路
NgClass={className}}：表达式}
第二条路
ngClass= {className:表达式}
但两者都不起作用。
浏览 1提问于2016-12-29得票数 8
回答已采纳
我有一个角9应用程序(最近从7升级，但在7仍然有相同的问题)，在我的app.component.html文件中，我有以下的代码。页面加载正确，一切看起来都很好。但方法
getSideBarState() //返回一个布尔值
在“切换”和“显示”中，当我第一次启动调试器时，ngClass会被触发并至少运行10+次。在最后一次运行之后，它等待大约10秒，然后~10再次触发并运行。这件事一直持续，没完没了地被触发和运行。
有人能告诉我为什么，以及如何阻止它被触发和运行这么多次吗？我只想在应用程序第一次加载时运行一次。
<div class="page-wrapper"
浏览 6提问于2020-06-26得票数 0
回答已采纳
1回答
我在组件中有一个项目列表：
list: Array<MyType>;
用户可以单击以下命令选择和取消选择元素：
toggleItem(item: MyType) {
if (this.selection.has(item)) {
this.selection.delete(item);
return;
}
this.selection.add(item);
}
选定的项存储在Set中。
selected: Set<MyType> = new Set();
现在，我需要切换一个CSS类和一个title-attribute，这取决于是否选择了一
浏览 1提问于2019-06-29得票数 0
回答已采纳
1回答
我试图切换排序数量-asc&排序-数量-desc，而有另一个图标在初始状态下，角度。我试着在ngClass中做一个三元的，但是找不到让ngClass在字体中工作的方法--太棒了。以下是代码：
sorting: any;
sortClass(sortData: string): string {
if (this.sortData.field === '' || this.sortData.field !== sortingField) {
return 'sorting';
} else if (this.sortD
浏览 4提问于2022-08-22得票数 1
回答已采纳
1回答
我正在尝试制作情态，所以当我点击每个按钮时，不同的情态应该会出现，里面有不同的内容。单击按钮时，active的值为true，当active为true时，modal div获取类.open。 HTML： <button type="button" class="btn btn-4" (click)="myFunction(0)">ბანკი</button>
<div class="modal" [ngClass] = "**active[0].active1** ? 'op
浏览 16提问于2021-04-03得票数 0
回答已采纳
我正在学习angular 10，但我有一个麻烦 我有一个html文档来验证我的组件中的formgoup。当我的组件设置了文本框的值时，该值显示为ok，但我的提交按钮显示这是无效的(必需的)。 让我看看..。 组件 export class PersonalComponent implements OnInit {
personalForm = new FormGroup({
name: new FormControl('', Validators.required),
email: new FormControl('', [V
浏览 27提问于2021-08-31得票数 0
回答已采纳
我正在试图弄清楚如何在active上切换类，只需单击按钮
这是我目前的密码..。
<div class="btn-group">
<button class="btn btn-secondary" [ngClass]="{ 'active' : isActive }" (click)="isActive = !isActive" type="button">Premier bouton</button>
<button class="btn
浏览 2提问于2017-05-24得票数 9
回答已采纳
下面是Angular 2中的代码。有人能解释一下如何在Stencil.js中使用ngclass吗？
我创建的组件是Angular2。现在尝试在Stenciljs中重新创建相同的内容：
<div class="inner_holder" [ngClass]="isSelected(day)">
<div class="col day">{{day.month}}</div>
<div class="col date">
<span>{{day.d
浏览 0提问于2018-02-20得票数 2
假设我有一个对象列表，我想要更改某个对象的样式。我正在使用ngClass和单击事件来切换CSS类。
<ul class="container">
<li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible">1</li>
<li class="item" [ngClass]="{'active
浏览 0提问于2017-02-24得票数 1
回答已采纳
我是Angular的新手，还在尝试进入Angular思维。我有几个按钮，比如：
<button class="btn" (click)="btn1()" [ngClass]="test ? 'Style':'StyleChange'">btn1</button>
<button class="btn" (click)="btn2()" [ngClass]="test ? 'StyleChange':'St
浏览 5提问于2021-03-07得票数 1
回答已采纳
1回答
日安，
如何仅在特定的li被悬停时应用方法。
代码示例：
app.component.ts
changeStyle(event) {
this.colorMe = event.type == 'mouseover' ? 'imRed' : 'imBlue';
}
app.component.html
<ul class="nav">
<li (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)
浏览 2提问于2017-06-15得票数 0
1回答
我用angular做了一个表格。表单运行得很好。现在我需要将表单转换为一个newCustomer对象。表单有一个复选框，但是用户没有。我的代码现在没有错误，但是console.log( newCustomer )什么也不做。所有的帮助都是正确的。我的组件代码：
export class RegistrationComponent implements OnInit {
registerForm: FormGroup;
bool:boolean = false;
constructor(private formBuilder: FormBuilder) {
this.reg
浏览 1提问于2018-08-02得票数 1
我有一个div，我想在这个div上添加一个删除转换，我有一个按钮来删除它。在触发按钮时，如何将css类添加到该div中。
div在*ngFor循环中创建。
<div *ngFor="let attribute of attributes>
<div [ngClass]="{' roll-out-blurred-left': a }">
{{attribute.name}} // on that div wants to add the class
</div>
&
浏览 0提问于2018-12-21得票数 0
回答已采纳
2回答
我有4个组件，当它们准备好的时候，应该让类“加载”，但我不太知道如何以一种好的方式处理这个问题
组件不在ngFor中，因此它们没有索引。
<div class="component" [ngClass]="{'loaded': loaded1}">1 </div>
<div class="component" [ngClass]="{'loaded': loaded2}">2 </div>
<div class="component
浏览 7提问于2017-10-08得票数 0
1回答
我有一些键是用FOR循环加载在页面上的。除非显示了特定的可见性图标，否则不应该显示令牌。以前，当我单击任何可见性图标时，所有的键都会显示。我只希望显示的键是与图标相关的点击，所以我添加和索引，但现在所有的键显示在页面加载，不能再切换之间的可见和隐藏。
key.component.ts
hide: boolean = false;
clickedIndex!: number;
key.component.html
<div ngClass="key-wrapper mt-5" *ngFor="let key of keyCopies, let i = ind
浏览 4提问于2022-08-16得票数 0
回答已采纳
我实际上是在尝试这个代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<button [ngClass]="{'btn': showDirectiveContent === false ? 'btn btn-danger': 'btn btn-success'}">
<b *ngIf="!showDirecti
浏览 1提问于2019-03-23得票数 0
回答已采纳
4回答
在某些元素上设置活动类时，我有问题。以下是一些代码：
<div *ngIf="project">
<jhi-alert-error></jhi-alert-error>
<div class="card mb-4">
<ul class="top-tabs">
<li>
<a href="#" [routerLink]="['../', project.id]" [ngClas
浏览 2提问于2019-06-17得票数 1
回答已采纳
我正在尝试判断*ngFor中的项是第一个还是最后一个元素来设置容器的样式。有没有办法做这样的事情？
<md-expansion-panel *ngFor="let item of items" *ngClass="{ 'first' : item.isFirst }">
<content></content>
</md-expansion-panel>
感谢您提供的帮助！
浏览 1提问于2017-10-25得票数 40
回答已采纳
3回答
我试图将两个值传递给ngClass。
你是怎么做到的：
[ngClass]="'cssprefix-' + var.value, {'newclass' : ifTrue}"
浏览 7提问于2017-10-20得票数 3
回答已采纳
这是表中一行的代码
<tr class="user-item" *ngFor="let device of group.devices" (click)="$event.stopPropagation()" ngClass="device.onlineState == 'Offline' ? 'highlight' : 'highlight2'">
<td class="qkFix">{{ device.deviceId }}<
浏览 0提问于2018-03-28得票数 2
回答已采纳
如何在ngClass中使用运算符？例如，我希望仅当someValue等于otherValue时才应用类
[ngClass]="{active: someValue === otherValue}"
浏览 2提问于2017-04-10得票数 0
我正在努力增强我们的指令。它曾经是一个input type='submit‘class="btn“元素，指令中有replace："true”。我已经将此指令的模板更改为以下内容：
<input type="submit" value="{{value}}" id="btnChoose"
ng-class="{{ngClass}}"
style="width: 85% !important; margin-top: 0;"
class="
浏览 13提问于2017-07-26得票数 0
回答已采纳
早上好
我一直在我的组件中添加条件CSS类或角调用它NgClasses，但是我只面临越来越多的错误！
我做错了什么？
我收到的错误消息：
compiler.es5.js:1689 Uncaught Error: Template parse errors:
Parser Error: Missing expected : at column 5 in [{key.class: true, 'active': key.enabled}] in ng:///AppModuleShared/KeyboardComponent.html@3:45 ("s]="{
浏览 1提问于2018-04-23得票数 1
我需要使用ngClass在我的网页上做一个通知徽章行为。如果我用这个：
<ion-tab [root]="tabPage2" tabTitle="Em Andamento" tabIcon="qi-th-list" tabBadgeStyle="danger" tabBadge=2> </ion-tab>
我试着做一些这样的东西：
<ion-tab [root]="tabPage2" tabTitle="Em Andamento" tabIcon="qi-th-
浏览 0提问于2018-02-25得票数 0
回答已采纳
在角1中，下面的代码工作得很好。
<div ng-class="$varA === $varB ? 'css-class-1' : 'css-class-2'">
但是当我尝试在角度2做类似的事情时，它不起作用。
我已经添加了directives: [NgClass]
<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">
我应该怎么写角2，谢谢！
编辑:这是我的错误，我不小心把{ } varA ===
浏览 17提问于2016-02-05得票数 80
回答已采纳
我想让按钮的颜色和边框颜色在组件控制器中被设置为独立变量。和展示了如何执行多个静态类，而不是多个动态类。我试过几种方法，但这些方法都没有用：
[ngClass]="[color] [border]" // doesn't work
[ngClass]="[color], [border]" // doesn't work
[ngClass]="[color, border]" // not dynamic binding
[ngClass]="{[iClass]: true, [iBorder]: true,}
浏览 15提问于2022-04-30得票数 0
回答已采纳
我试图通过发射从子到父传递数据，但是我没有任何子标记，并且只在路由中到达子节点，那么如何才能侦听发出的数据呢？
parent.html
<ul class="list-unstyled multi-steps">
<li [ngClass]="{ ' is-active': status == 'first' }">
<span routerLink="/room/specification"></span>
ste
浏览 5提问于2020-08-04得票数 3
我需要在ngClass表达式中插入一个值，但我无法让它工作。
我尝试过这样的解决方案，这是唯一对我有意义的方案，这两种方法在插值时都失败了：
<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>
此方
浏览 10提问于2016-05-07得票数 159
回答已采纳
我希望能够在我点击的地方切换颜色。现在，当我点击其中一个时，它会将它们全部切换。我想分别切换每一个。
HTML：
<div class="crit-desc crit-item-flags">
<i class="fal fa-flag" (click)="flagActive()" [ngClass]="flagStatus ? 'flagActive' : 'flagNotActive'"></i>
<i class="fal
浏览 24提问于2018-08-04得票数 1
回答已采纳
1回答
在下面的片段中，我为3个不同的属性调用相同的函数isSiteAlreadyAdded(site.id)。有任何方法可以存储特定选项标签的值并将其用于给定的选项属性吗？
<div class="template-form-input-container">
<select style="width: 100%;" id="sites" [(ngModel)]="site" name="sites" #sites="ngModel" required>
浏览 3提问于2021-12-22得票数 0
回答已采纳
考虑以下代码：
<div [ngClass]="var.state">
<div *ngFor="let var of vars">{{var.text}}</div>
</div>
这将失败，因为仅在ngFor循环上下文内限定var的范围。如您所见，我需要在循环上下文之外对var数据进行一些分区。有没有可能把它包含在某个模板变量中，或者被任何其他黑客攻击？
注意:我知道，这是设计上的行为，上面的代码被简化了(需要在几层以上使用var)。
浏览 4提问于2018-05-30得票数 1
4回答
在条件下的角2变化类
、、、、
我在视图中有三个按钮，在页面加载时，我将显示第一个按钮的内容。单击按钮后，按钮将变为活动按钮，但在页面加载时，初始按钮不会设置为活动按钮。为了显示第一个活动按钮，我将其添加到div中：
[ngClass]="'active'"
这方面的问题是，当单击另一个按钮时，第一个按钮保持活动类。我正在根据字符串来评估正在显示的数据。在单击每个按钮时，字符串会发生更改。
如何添加条件以检查当前字符串？那么，如果字符串与正在显示的当前数据匹配，那么将活动类添加到此按钮中吗？
所以这就是我要找的东西：
[ngClass]="'active'"
浏览 5提问于2016-11-08得票数 16
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
