Angular [ngClass]条件和函数的组合
Angular中的[ngClass]是一个指令，用于根据条件和函数的组合来添加或移除HTML元素的CSS类。
[ngClass]指令可以使用以下两种方式来定义CSS类：
- 条件方式：可以根据布尔值来添加或移除CSS类。例如，当一个条件为true时，添加一个CSS类，当条件为false时，移除这个CSS类。
- 函数方式：可以使用一个函数来返回一个CSS类的对象。函数可以根据元素的状态或属性来动态地计算并返回CSS类的对象。
[ngClass]指令的语法如下：
[ngClass]="{'class1': condition1, 'class2': condition2, 'class3': function()}"
其中，'class1'、'class2'和'class3'是CSS类的名称，condition1和condition2是布尔值条件，function()是一个返回CSS类的对象的函数。
应用场景：
- 动态切换CSS样式：通过[ngClass]指令，可以根据条件或函数动态地切换HTML元素的CSS类，从而实现动态切换CSS样式。
- 根据状态改变样式：可以根据组件的状态来添加或移除CSS类，例如，当表单验证通过时，添加一个成功的样式类，当验证失败时，添加一个错误的样式类。
- 根据属性改变样式：可以根据元素的属性值来动态地添加或移除CSS类，例如，当元素被选中时，添加一个选中的样式类。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云函数（Serverless）：腾讯云的无服务器计算产品，可用于编写和执行云函数。通过云函数，可以在云端运行JavaScript代码，实现后端逻辑。 产品链接：https://cloud.tencent.com/product/scf
- CVM（云服务器）：腾讯云的云服务器产品，提供高性能、可靠稳定的云计算资源，可用于搭建和管理应用程序的基础设施。 产品链接：https://cloud.tencent.com/product/cvm
- COS（对象存储）：腾讯云的对象存储服务，提供海量、安全、低成本的云存储服务，适用于存储和处理各种类型的数据和文件。 产品链接：https://cloud.tencent.com/product/cos
相关·内容
1回答
我尝试在angular 7中显示自定义文本框的模板驱动验证错误消息，但working.Anyone找不到这个问题?如何解决这个问题？ 演示：https://stackblitz.com/edit/angular-7-template-driven-form-validation-yzcwqc?file=app%2Fapp.component.html app.component.html： <div class="form-group">
<label for="firstName">First Name</label>
浏览 14提问于2019-03-23得票数 0
回答已采纳
使ngClass表达式成为条件表达式的任何方法。例如，我使用javascript尝试了以下操作：
$scope.setEnabled = function(status){
$scope.filterEnabled = status;
if(status){
angular.element(document.querySelector( '#enabledFalse')).removeClass('active-btn');
angular.element(document.querySelector( '#en
浏览 3提问于2015-03-08得票数 1
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
2回答
我不能让Angular2使用有条件的ngClass样式和引导标签。
<h1 [ngClass]="{'label label-warning': yourName=='Daniel',
'label label-success': yourName!='Daniel'}">
当我对我的应用程序进行样式设计时，ngClass似乎正在从'label label-success'中删除第一个“标签”。它在满足第二个条件时正确地样式，但当满足第一个条件时，样式设
浏览 7提问于2017-02-06得票数 1
回答已采纳
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
回答已采纳
我在Angular 2中有一个表达式，叫做selectedState。表达式的计算结果为const内部的五个属性之一。根据所单击的内容，它会更改类名。
<button
class="button button--secondary"
[ngClass]="selectedState">
<div class="u-maxX u-centerX"&g
浏览 5提问于2017-08-15得票数 0
回答已采纳
在Angular中，我想使用ngClass和单击事件来切换类。我在网上看了看，但有些是angular1的，没有任何明确的说明或示例。任何帮助都将不胜感激！
在HTML中，我有以下内容：
<div class="my_class" (click)="clickEvent($event)" ngClass="{'active': toggle}">
Some content
</div>
在.ts中
clickEvent(event) {
// Haven't really got far
浏览 74提问于2017-06-14得票数 70
回答已采纳
1回答
我一直在浏览angular.io上的指南，并偶然发现了。在提供的示例中，ngClass的源是一个组件函数：
// HTML
<div [ngClass]="setClasses()">This div is saveable and special</div>
// Controller
setClasses() {
let classes = {
saveable: this.canSave, // true
modified: !this.isUnchanged, // false
special: this
浏览 4提问于2017-01-09得票数 2
回答已采纳
4回答
我正在开发一个angular应用程序。当我的标志为真时，我想有条件地改变正文的背景颜色。在我的css中，我有以下内容
body {
backgraound-color: blue;
}
现在，此颜色应用于整个页面。但是当我的标志为true时，我想改变页面的背景颜色。通常，当我必须有条件地更改背景颜色时，我会使用ngClass，但在这种情况下，我不知道如何在body上应用ngClass。我怎样才能有条件地改变身体的背景颜色？
浏览 1提问于2020-08-24得票数 1
我知道，在Angular2中，我可以通过以下操作向组件的选择器元素添加类'red‘：
@Component({
selector: 'selector-el',
host: {
'[class.red]': 'true'
},
...
})
我想知道是否有一种向主机添加动态类的方法，与您对NgClass所做的类似(我知道NgClass实际上不受支持，我正在寻找可能的解决方案)：
@Component({
selector: 'selector-el',
hos
浏览 13提问于2016-03-14得票数 25
回答已采纳
当我对多个表达式和公共类一起使用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
回答已采纳
在angular 4中，如何在ngClass中同时使用: map和array？
例如：
[ngClass]="[{'some-class':whenAppears()}, someReturnedClass()]"
其中，someReturnedClass是：
someReturnedClass() {
return 'someClassName'
}
我试过了：[ngClass]="[{'some-class':whenAppears()}, someReturnedClass()]"
和[ngClass]=
浏览 1提问于2017-06-02得票数 2
1回答
我需要在我的auction.component和auctiongroup.component中使用JwPaginationComponent。 所以我创建了shared.module.ts import { NgModule } from '@angular/core';
import { JwPaginationComponent } from 'jw-angular-pagination';
@NgModule({
declarations: [
JwPaginationComponent
],
exports: [JwPagina
浏览 10提问于2019-09-03得票数 1
回答已采纳
ngClass和类绑定有什么区别？
两者都接受相同的语法。我看到的唯一区别是类可以做到这一点：[class.sale]="onSale"。
两者都接受几乎相似的语法：
[ngClass]="stringExp|arrayExp|objExp"
[class]="string | Record<string, boolean | undefined | null> | Array<string>"
我已经在上面读到了一些答案。但那是几年前的事了。我想现在angular团队已经让这两种表达方式很相似了。
有人能证实这一点吗？
浏览 0提问于2021-03-22得票数 1
我正在做一个Angular 4项目，最近Angular 5.2发布了。
当我打开angular.io站点并点击“文档”时，我可以看到Angular的文档，但没有提到文档的版本。
我在一些版本中看到，在ngClass这样的括号中使用ngClass，在其他版本中使用ngClass，但不知道哪个版本有什么语法。
为什么在angular.io站点上没有这样的信息，以及如何在angular.io站点中获取angular 4的文档，请让我知道
浏览 7提问于2018-01-20得票数 0
我创建了下面的简单示例组件，它使用@Component装饰器的主机属性向组件DOM元素添加了一些属性和侦听器。在我的例子中，ngClass是无效的。有人知道为什么和如何修复它吗？
import { Injector, Component } from "angular2/core";
import { NgClass } from "angular2/common";
import { SelectionService } from "../selection-service";
@Component({
selector: "
浏览 5提问于2016-03-02得票数 17
回答已采纳
如何在Angular 2.x中创建Decorator指令？我是针对Angular的alpha版本编写的，并试图重现AngularJS (1.x)指令ngClass中的功能。下面是我在Angular中尝试使用自己的NgClass的一个片段。我想要做的是观察一些表达式的值，这些表达式可能包含从类名到布尔表达式的哈希。当这些表达式发生更改时，将在已应用装饰器的元素的classList属性中添加或删除名称。
这个语法有什么问题？装饰者甚至不是工作的正确模板，也许我应该创建一个模板指令？尽管如此，使用Angular声明指令的语法是什么？我接受ES5格式的答案，但我更喜欢ES6和AtScript。
对于上
浏览 0提问于2015-02-26得票数 4
1回答
我正在使用Angular 4和Angular材质，并且我正在搜索根据当前分辨率应用类的方法。我正在搜索类似这样的东西(使用Angular Material的断点)：
<div [ngClass]="{'no-left-margin': AngularMaterialBreakpoint}"></div>
或者：
<div [ngClass]="{'no-left-margin': window.screen.width < 1280}"></div>
但第一种方法更可取。我已经
浏览 5提问于2017-07-23得票数 1
回答已采纳
我已经在angular Js 4中制作了组件，现在我正在尝试在stencils js中制作与web组件相同的组件。
我有如下的angular代码
<button [class]="classNames" (click)="toggleMasterButton()"
[ngClass]="masterButtonActive ? _config.masterButtonClass :'-state-grey'">
我尝试了下面的代码，但无法像angular组件那样正确解析ngClass和类。任何帮助都将不胜感激
浏览 18提问于2017-12-28得票数 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
回答已采纳
2回答
我正在开发一个angular应用程序，我在其中使用了mat表单域。为了改变mat表单域底部边框的颜色，我使用了mat- form - field -ripple css，它是为mat表单域内置的。CSS如下所示。 .mat-form-field-ripple {
background-color: #f9c940!important;
} 当我使用这个CSS时，它会自动应用于所有表单域。当一个条件为真时，我必须应用#f9c940颜色，当另一个条件为真时，我必须应用不同的颜色。我的mat表单域代码如下： <mat-form-fiel
浏览 18提问于2020-04-19得票数 0
1回答
在html中，我想更改span的css。为此，我通过应用以下设置来使用角2的ngClass函数：
app.components.ts
import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from "angular2/common";
export class AppComponent {
public isOn = true;
public toggle(newState) {
console.log("newState: "+newState);
this.isOn = newStat
浏览 2提问于2016-01-23得票数 0
4回答
在AngularJS 2中，当单击一个元素时，它需要更改自己的样式，如果其他元素具有该样式，则需要将其删除-最好是在一个函数中，我该如何处理这种情况。 与Angular.js How to change an elements css class on click and to remove all others类似，只是在AngularJS 2中使用TypeScript。 组件 https://plnkr.co/edit/Q2BoU4sNnXdaJB5vrZ8h?p=preview //our root app component
import { NgModule} from '
浏览 41提问于2016-11-23得票数 12
回答已采纳
在角度应用中，我使用下拉滤波器进行用户选择。我在ngClass中添加了逻辑
`<div [ngClass]="i > 2 && 'array-design'">`
如何将类的逻辑移动到控制器上？当它们在模板中时，不可能对它们进行单元测试。
<ng-container *ngIf="searchFilters.length > 0; else loading">
<div class="filter-items" *ngFor="let
浏览 4提问于2022-05-20得票数 0
回答已采纳
我已经定义了一个自定义属性指令：
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '.vvdirective'
})
export class VVdirectiveDirective {
constructor(private elRef: ElementRef) {}
ngOnInit() {
this.elRef.nativeElement.style.backgroundColor = "gray";
浏览 6提问于2020-05-16得票数 0
HTML中的所有函数都会被调用，但类不会被附加。所有类都在.css文件中定义。此组件驻留在另一个组件中。任何人都能看到哪里出了问题，为什么没有应用类吗？
如果对.addClass()或.removeClass()使用jQuery，则会添加/删除类。但是我想使用Angular工具，而不是直接使用DOM操作。
这是我的组件
import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
@Component({
selector: 'app-popup',
te
浏览 0提问于2018-04-20得票数 0
如何在.className相同但条件不同的情况下使用[ngClass]？
我试着像这样将它们分开--但由于某种原因，它并没有附加这个类。
<button class="btn" [ngClass]="{'btn-success': condition1, 'btn-success': condition2 }">My Button</button>
也许像这样的东西，它和上面的一样，它没有附加btn-success类到按钮。
<button class="btn" [ngClass]=
浏览 0提问于2017-03-27得票数 1
我目前在一个元素上有两个不同的[ngClass]工作实现；
[ngClass]="{ selected: element.isSelected, highlighted: element.isHighlighted}"
和
[ngClass]="element.customClasses"
是否可以将这两种方法结合在模板中，还是必须在组件中创建一个方法来基于上面的逻辑返回一个类数组？
谢谢!
浏览 1提问于2017-02-12得票数 1
回答已采纳
我在div中有一个img标记，我想使用ngClass来镜像。当我在img标记中使用ngClass时，我得到了一个错误:无法绑定到“ngClass”，因为它不是“img”的已知属性
我的component.ts文件：
imgFlipStyleY = 'img-defaultY';
flipY(){
if(this.imgFlipStyleY == 'img-changeY') {
this.imgFlipStyleY = 'img-defaultY';
} else {
this.imgFlipStyleY
浏览 4提问于2022-05-28得票数 -1
使用Angular 7，我在我的组件.ts文件中创建了一个ngClass方法，效果很好。
我想要的是在我的所有组件中使用相同的方法，而不是重写代码，但我不确定代码应该放在哪里。我试着把它放到app.component.ts里，但是没有用。
我可以把一个ngClass方法放在哪里，这样它对我所有的组件都是全局的？
代码非常简单。它只是将一个类分配给一个金额，如果它是正的，就把它涂成绿色，如果它是负的，就把它涂成红色。
moneyClass(amount) {
if(amount>=0)
return 'moneyGreen';
else
浏览 40提问于2019-11-08得票数 0
下面的HTML代码基于组件返回的列表递归地创建列表项，我只想将' first -child‘CSS类应用到第一个列表项。
<ul class="link-list-horz">
<li *ngFor="let menu of menulist" [ngClass]="first-child:">
<a href="">{{menu}}</a>
</li>
</ul>
.first-child a
{
border-radius: 10;
浏览 2提问于2016-12-01得票数 3
回答已采纳
1回答
**每件事都表现得很完美，但如何突出活动的一面却不使用任何第三方组件，我希望有人能在这方面帮助我。
谢谢**
<ul class="tabs">
<li [ngClass]=" {'active-tab': tab==1 }"><a (click)=" tab = 1 " href="javascript:void(0)">Tab 1</a></li>
<li [ngClass]=" {'active-tab': tab==
浏览 3提问于2019-10-06得票数 1
回答已采纳
角2提供了许多内置组件.比如NgIf，NgFor，NgStyle，NgNonBindable.有些组件与“*”一起使用，例如*ngIf和*ngFor：
<div *ngFor="item of items">
{{item}}
</div>
其中一些与“[]”一起使用，例如ngStyle和ngClass：(组件输入？)
<div [ngStyle]="{'background-color': 'yellow'}">Content</div>
其中一些被用作“角-1”：例如：
&
浏览 1提问于2016-03-16得票数 0
回答已采纳
我知道如果我把title=“链接名称”放到锚标签中，描述或标题就会出现。但我只想让它在导航栏折叠时显示。
在html文件中，我有更多的链接，但为了节省空间，我选择显示其余的链接。
.html模板
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav nav-sb metismenu" id="side-menu&#
浏览 2提问于2020-09-03得票数 0
1回答
我最近尝试使用angular，我想在表中添加accordion，然后我的表子出现在每个row..how中来修复它？
Typescript代码
constructor(
...
protected labarugiReport: ReportLabarugiService
) { }
ngOnInit(){}
...
isActive(id) {
return this.selected === id;
}
async getSub(id:any){
this.selected = (this.selected === id ? null : id);
浏览 0提问于2019-02-27得票数 0
我正在尝试对dom元素实现ngClass方法，但在实现它时遇到了一些问题，样式没有应用于dom元素。
组件代码->
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-imp-style',
templateUrl: './imp-style.component.html',
styleUrls: ['./imp-style.component.css']
})
export class ImpStyleCo
浏览 0提问于2018-08-21得票数 0
为什么我们需要在内置的Angular指令中使用方括号，比如ngClass，ngStyle？ 示例： <some-element [ngClass]="'first second'">...</some-element> 为什么不使用下面这样的代码呢？ <some-element ngClass="'first second'">...</some-element>
浏览 13提问于2020-03-22得票数 2
回答已采纳
1回答
我正在尝试更改由id单击的菜单css，当单击另一个菜单时，其他所有其他菜单都会失去样式，只有单击的内容才能赢得样式。
但我不想这么做有人能帮我吗？
import { Component } from '@angular/core';
import { NgClass } from '@angular/common';
@Component({
selector: 'my-header',
template: `
<nav class="navbar navbar-default navbar-sta
浏览 2提问于2016-08-13得票数 2
回答已采纳
<div>
<label *ngFor="let article of articles; let i = index" [ngClass]="{'is-valid': isChecked}">
<input type="radio" name="name" (change)="isChecked = true">
input{{i}}
</label> 在这里，'isChecked‘类被应用于所有基于输入的标签，但是即使我选择了另一个选
浏览 12提问于2020-07-11得票数 0
回答已采纳
3回答
我有一个angular component表示带有浮动label的input。我切换一个boolean变量，用于在input包装器上设置class，以便为label设置浮动animation，并在input元素上使用angular (blur)和(focus)。现在，这很好，当我在input中单击时，label会向上移动，当我离开input时，它会恢复动画。我唯一的问题是，当我在input中键入一个值并保留它时，label应该保持在input之上。目前，它的动画恢复和重叠的value。例如，如何在我的ngClass中检测到，如果isFocused是true 或，label有value，以保留c
浏览 1提问于2018-12-03得票数 1
回答已采纳
我有一个input元素，我想使用自定义指令将ngModel和ngClass绑定到它，但我遇到了一些麻烦。
我所拥有的：
<input type="text" myDirective="PropertyFromScope" />
我想要的结果是：
<input type="text" ng-model="PropertyFromScope" ng-class="{'class' : MethodFromScope}" />
我尽量避免使用模板，因为我希望该指令可以与任何输入标记
浏览 1提问于2013-07-01得票数 10
1回答
我使用的是angular 9，有没有办法在组件中动态生成一个类的css？
.stick-menu{
transform: translate(10px,20px);
}
我想要上面x和y的动态位置，示例
.stick-menu{
transform: translate(20px,30px);
}
但不使用ngclass或ngstyle，只需在类中更改并应用于所有元素即可，谢谢
浏览 0提问于2020-10-14得票数 0
我为一个表单使用了ngClass，所以我可以根据字段是否有效来给它着色，当我在本地构建它以进行测试(调试构建)时，网页可以正常工作，表单输入会着色。如果我尝试使用FTP发布网站，它将在构建(发布构建)时失败。我正在从Visual Studio构建网站，因为我在ASP + Angular上工作，但我的问题与asp标签没有得到任何幸运。
<form [formGroup]="emailForm" (ngSubmit)="onFormSubmit()" [ngClass]="{'form-submitted': formSubmitted
浏览 27提问于2019-08-07得票数 0
回答已采纳
1回答
我得到一个空白的侧面菜单屏幕上的iOS模拟器，虽然选项是可点击的。在浏览器或android手机上运行应用程序时不会出现此问题。我使用的是最新的ionic和Xcode。请让我知道如何解决这个问题。提前谢谢。我已经添加了type=“覆盖”和离子分裂窗格，但没有工作
**app.component.html**
<ion-app>
<ion-menu side="start" menuId="lamb-menu" contentId="lamb-side-menu">
<app-side-menu&
浏览 28提问于2020-05-06得票数 0
回答已采纳
我需要向元素中添加几个类。在我的例子中，问题是一个类是一个简单的字符串，'start-' + i和另一个是条件{'is-active': i <= totalStars}。
我想说这听起来很容易，但是当我尝试的时候，它看起来正好相反。
<ul>
<ng-container *ngFor="let star of stars; let i = index">
<li [ngClass]="['star-' + i, {'is-active': i &
浏览 3提问于2019-10-10得票数 1
回答已采纳
我可以使用多个这样的条件：
<div [ngClass]="{'checked': isChecked, 'disabled': isDisabled}">
和像这样的条件(三元)运算符：
<div [ngClass]="isEmpty ? 'empty-class' : 'not-empty-class'">
有没有办法把多个条件和三元运算符结合起来？类似于以下内容，但不起作用：
<div [ngClass]="{'checked': isCh
浏览 19提问于2019-11-22得票数 2
这个模板中的ngClass太长了。有什么简单的方法吗？谢谢。
<ng-container matColumnDef="ThisConsult.Status">
<th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'headerStyle'">Status</th>
<td mat-cell *matCellDef="let element">
<div [ngClass]="
浏览 2提问于2018-10-03得票数 0
回答已采纳
2回答
现在，没有对齐，数据显示如下：
这些列在一个变量中调用，因为有多个excel选项卡具有不同的列，而在其他tr中，标记行被选中以与特定的列匹配。
<table class="styled-table">
<thead>
<tr id="colNames">
<!-- Keep this table header because it makes
浏览 2提问于2021-11-19得票数 0
有人能说明一下ngclass = "“和ngClass =”{‘类名’}“之间的区别吗？
浏览 0提问于2018-11-15得票数 0
我对Angular是个新手。我有一个页面，我有一个注册表单作为模板内的模式和一个成功的消息或错误消息显示在一个单独的模式。根据它是成功还是错误，我使用ngClass来改变模式的背景色，但是这也改变了注册表模式的背景色。
请建议我应该如何使用ngClass，以便它只影响消息模式。
到目前为止，我习惯了以下内容：
[ngClass]="{'bg-danger': errorMessage, 'bg-success': successMessage}"
浏览 6提问于2021-03-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
