ngClass神秘地不能与Angular 6一起工作吗？
ngClass是Angular框架中的一个指令，用于动态地添加或移除HTML元素的CSS类。它可以根据条件来切换类的存在，从而实现样式的动态变化。
在Angular 6中，ngClass是可以正常工作的，没有与Angular 6不兼容的问题。它可以与Angular 6一起使用，以实现动态样式的控制。
ngClass的使用非常灵活，可以接受多种类型的参数。它可以接受一个字符串、一个字符串数组、一个对象或一个对象数组作为输入。根据不同的输入类型，ngClass会根据条件来添加或移除相应的CSS类。
下面是ngClass的一些常见应用场景：
- 根据条件切换元素的样式，例如根据用户的登录状态来显示不同的样式。
- 根据数据的状态来改变元素的样式，例如根据数据的有效性来显示不同的样式。
- 根据用户的交互来改变元素的样式，例如根据鼠标的悬停状态来显示不同的样式。
在腾讯云的产品中，与ngClass相关的产品是腾讯云Web+，它是一款支持Web应用快速部署和管理的云产品。通过Web+，您可以轻松地将Angular应用部署到云服务器上，并进行灵活的管理和扩展。
您可以通过以下链接了解更多关于腾讯云Web+的信息： 腾讯云Web+产品介绍
总结：ngClass是Angular框架中的一个指令，用于动态地添加或移除HTML元素的CSS类。它可以与Angular 6一起工作，没有兼容性问题。在腾讯云中，您可以使用腾讯云Web+来部署和管理Angular应用。
相关·内容
我有一个带有的Angular 5项目(不要与普通的手风琴混淆)。
<ul id="sidenav-list" class="vertical menu accordion-menu" data-accordion-menu data-multi-open="false">
<li [ngClass]="navSections.personalAndIncome.statusClass">
<a (click)="handleUpdateClassesOnSectionNavigate(
浏览 70提问于2018-05-08得票数 2
回答已采纳
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
回答已采纳
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
回答已采纳
如何在Angular 2.x中创建Decorator指令？我是针对Angular的alpha版本编写的，并试图重现AngularJS (1.x)指令ngClass中的功能。下面是我在Angular中尝试使用自己的NgClass的一个片段。我想要做的是观察一些表达式的值，这些表达式可能包含从类名到布尔表达式的哈希。当这些表达式发生更改时，将在已应用装饰器的元素的classList属性中添加或删除名称。
这个语法有什么问题？装饰者甚至不是工作的正确模板，也许我应该创建一个模板指令？尽管如此，使用Angular声明指令的语法是什么？我接受ES5格式的答案，但我更喜欢ES6和AtScript。
对于上
浏览 0提问于2015-02-26得票数 4
1回答
我有一个地图组件，它上面有一个视频组件。当点击视频时，地图和视频组件切换类，这样视频就会变成全屏，并在上面嵌入地图。
我正在使用NgClass更新两个组件的类，但我注意到在Chrome中运行我的应用程序时，地图元素的类部分在检查器中闪烁。
我检查了它，并且似乎ngClass从应用程序启动的那一刻起就不断地更新类，尽管组件没有做任何更改。我只想在单击inset元素时更改该类。
这是正常行为吗？有什么我能阻止的吗？
这是我的HTML：
<map class="map" (click)="switchInset('map')" [ngClass]
浏览 0提问于2016-10-27得票数 4
回答已采纳
在角2中表示库@角/路由器。this.router.subscribe似乎不再存在了？
它过去在路由器上工作，但现在似乎不起作用了。有人知道它发生了什么变化吗？
这是我的当前代码
import {Component} from '@angular/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgIf, NgClass} from '@angular/common';
import {Router, ROUTER_DIRECTIVES, Routes } from '@angular/router
浏览 5提问于2016-06-05得票数 0
2回答
如何设置动态HTML表的列的宽度
、、、、
我有如下代码
<table >
<thead >
<th *ngFor="let col of workData.columns;trackBy: trackByColumn;
let hindex=index;" [ngClass]="setWidth(col)" [index]="hindex">
</th>
</thead>
</table>
//TS File
setWidth(co
浏览 3提问于2020-05-27得票数 0
回答已采纳
我试着理解单向绑定和插值之间的区别，发现对于ngClass，这两者似乎是等价的，但对于ngStyle，我无法使用插值来使其工作(只有绑定有效)。请参阅以下StackBlitz：https://angular-a6cvfb.stackblitz.io以获取实时示例。 下面注释掉的ngStyle语法对我来说都不起作用。我错过了什么吗？非常感谢！ {注意:所有被注释掉的东西都是这样的，否则就会破坏代码}。 import { Component, Input } from '@angular/core';
@Component({
selector: 'hello
浏览 38提问于2019-04-10得票数 1
<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
回答已采纳
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
我收到这样的警告：
The <template> element is deprecated. Use <ng-template> instead ("
[attr.tabIndex]="-1"
[ngClass]="{'k-item': true}">
[WARNING ->]<template *ngIf="template"
[templateContext]="{
当使用angular 4时，这
浏览 2提问于2017-03-28得票数 9
我使用的是angular6 multi-select，它有一个来自ngOnInit上的角服务的对象数组中的项列表，它正在传递到multi-select中：
this.sensorTypes = [
{ label : "Power", value : "P"},
{ label : "Current", value : "C"},
{ label : "Voltage", value : "V"}
]
在默认情况下，我希望在表单加载时在multi-select中设置2个值。为此，我将ng
浏览 1提问于2019-02-21得票数 18
回答已采纳
我正在尝试在Internet Explorer10中运行一个非常简单的应用程序。我说的是你在运行'ng new projectname‘时看到的应用程序。我已经对polyfill.js文件中的文件取消了注释。我正在Windows 7 64位上工作
这是我的package.json：
{
"name": "bogstandard",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng
浏览 6提问于2017-11-26得票数 1
我在Android 11上使用电容3和Ionic 6角。
我使用了媒体捕捉插件来录制视频，结果如下：
[MediaFile]
0: MediaFile
end: 0
fullPath: "file:///storage/emulated/0/DCIM/Camera/20210522_185343.mp4"
lastModified: null
lastModifiedDate: 1621702425000
localURL: "cdvfile://localhost/sdcard/DCIM/Camera/20210522_185343.mp4"
name: &#
浏览 9提问于2022-04-05得票数 0
当使用Angular：'ng-show="userFieldForm.email.$invalid && userFieldForm.email.$touched“验证表单时，使用Angular //code.angularjs.org/1.4.0/angular.js可以很好地工作。
但在使用//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js.时
我确实找过了，但没有找到真正的解决方案。我肯定我漏掉了一条信息。
以下是代码的一部分：
<head>
<m
浏览 0提问于2015-12-11得票数 1
为什么我们需要在内置的Angular指令中使用方括号，比如ngClass，ngStyle？ 示例： <some-element [ngClass]="'first second'">...</some-element> 为什么不使用下面这样的代码呢？ <some-element ngClass="'first second'">...</some-element>
浏览 13提问于2020-03-22得票数 2
回答已采纳
我最近更新了我的NPM模块。不幸的是，我并没有真正注意到更新了什么，但有趣的是，我所有的“模板内”角度绑定都停止了工作。
即。
<button type="submit"
class="button button--full-width"
[ngClass]='{"button--ajax-loading": showBtnAjaxLoader}'>
又名。当and ngClass的条件为true时，它输出undefined。我可以尝试将单引号(')替换为(")
浏览 9提问于2017-07-28得票数 0
2回答
我使用Angular2和JSON脚本来构建表单。
我的目的是计算我的WebApp前端的输入。我想看到两个输入之间的计算结果。
我的计算结果是JSON中的字符串格式。我能把我的字符串投到Angular2 calcul吗？
"Input": {
"id": "test",
"type": "text",
"calc" : "{{2+3}}"
}
当我写{{Input.calc}}时，我想看到的是5 ，
浏览 2提问于2017-04-03得票数 0
回答已采纳
我安装了一个ngx-mask包，当我在ie上测试时，它不工作。它得到错误TypeError:对象不支持属性或方法'includes‘。我附上了代码。我修改了策略。所以问题出在IE上。在Chrome上，它可以正常工作。我使用了ngx-mask来格式化数字。如果有任何帮助，我将不胜感激。 <input placeholder="street" formControlName="street" mask="99" /> /**
* This file includes polyfills needed by Angular
浏览 38提问于2019-07-01得票数 0
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
回答已采纳
我试图在&&的条件下使用ngClass：
我的代码是：
<div class="col-sm-12 col-md-6 form-group " [ngClass]="{has-error : (!CountryName.valid && CountryName.touched)}">
<label class="control-label">Country Name</label>
&
浏览 1提问于2018-10-15得票数 0
回答已采纳
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
回答已采纳
我知道，在Angular2中，我可以通过以下操作向组件的选择器元素添加类'red‘：
@Component({
selector: 'selector-el',
host: {
'[class.red]': 'true'
},
...
})
我想知道是否有一种向主机添加动态类的方法，与您对NgClass所做的类似(我知道NgClass实际上不受支持，我正在寻找可能的解决方案)：
@Component({
selector: 'selector-el',
hos
浏览 13提问于2016-03-14得票数 25
回答已采纳
1回答
下面是简单的sass代码、访问sass代码的角2组件和呈现的HTML。在我的最后一个span元素中，blueBig没有正常工作。我不知道为什么这个简单的例子没有正确扩展。有人能为我解释一下这个问题吗？谢谢!
Angular2组件
@Component({
selector: 'test',
template: `
<h1> testing sass</h1>
<span [ngClass]="{blue : true}">This should be blue</span>
<
浏览 1提问于2016-06-09得票数 1
下面的web链接演示了当用作不同的routerLinkActive元素的ngClass的布尔值时，HTML的工作情况
相比之下，routerLinkActive id不能与web链接下面的@angular/material实例一起使用，但通过注释第5行和第6行来消除错误，但是没有纠正routerLinkActive id：的可用性
浏览 3提问于2021-03-11得票数 1
我创建了下面的简单示例组件，它使用@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
回答已采纳
1回答
我是angular 6的新手。我正在使用angular 6创建一个项目。我在共享数据时遇到了一个问题。项目结构如下： 1)标题组件2登录组件3)主页组件4)共享服务 我在当前路由的基础上将类添加到我的头组件中。这是在页面刷新上工作的。但是当我从一个组件移动到另一个组件时，这是不起作用的。 代码如下： 布局组件为： <app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div> Header组件
浏览 18提问于2019-03-13得票数 1
回答已采纳
1回答
我试图对Djinni进行评估，以便从我们的C++代码中生成Java和Obj包装器。
我们目前使用，并正在评估用于包装器生成的其他工具。
由于工作地点的一些限制，我们的C++代码是C++-98。
由于某些客户需求，我们不能迁移到C++-11。
因此，我想知道是否可以使用C++-98的Djinni。
自述声明：
接口是具有可调用的定义方法的对象(在C++中，由shared_ptr传递)。Djinni生成代码，允许从C++或ObjC透明地使用在ObjC中实现的接口，反之亦然。
我在互联网上看到了几个使用Djinni的示例，它们似乎都在使用shared_ptr的接口。
使用Djinni必须使用
浏览 0提问于2016-06-28得票数 1
回答已采纳
1回答
角1.x允许在HTML中放置元素，这在中是不为人所知的。解决这一问题的方法是添加data-前缀并编写例如data-ng-repeat而不是ng-repeat。
在当前的角2版本中，我们有一个不同的语法。这种语法也是区分大小写的，例如我们必须使用ngClass，而不是ngclass。
Angular2中使用的所有括号都会导致HTML验证错误。幸运的是，还有一个规范形式，所以我们可以使用(event)代替on-event，而不是[property]，我们可以使用bind-property，而不是[(ngModel)]，我们可以使用bindon-ngModel。所有这些都可以使用data-前缀。
但
浏览 5提问于2016-05-27得票数 4
回答已采纳
3回答
我正在创建3个按钮，它们应该是按顺序点击的。因此，单击第一个之后，第二个应该是活动的。检查我的逻辑工作的元素，但是CSS没有改变。我刚认识角质，我在这里做错了什么
CSS：
.disabled {
cursor: not-allowed;
color: red;
}
HTML：
<div style="text-align:center">
<div>
<h6>TAG</h6>
<a class="btn btn-info" (click)="setPackageClick
浏览 1提问于2018-08-21得票数 0
回答已采纳
2回答
我不能让Angular2使用有条件的ngClass样式和引导标签。
<h1 [ngClass]="{'label label-warning': yourName=='Daniel',
'label label-success': yourName!='Daniel'}">
当我对我的应用程序进行样式设计时，ngClass似乎正在从'label label-success'中删除第一个“标签”。它在满足第二个条件时正确地样式，但当满足第一个条件时，样式设
浏览 7提问于2017-02-06得票数 1
回答已采纳
我试图在角5下创建一个注册表格。当这样做时，我会得到一个错误：
未找到./src/app/pages/auth-admin/auth-admin.module.ts模块:错误:无法解决“@角/平台-浏览器/src/browser”
我如何解决这个问题？
提亚
，这就是我运行的角度下的
Angular CLI: 1.6.1
Node: 8.9.4
OS: win32 x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platf
浏览 2提问于2018-02-07得票数 1
回答已采纳
2回答
我试图在*ngClass中添加多个值，这些值以前用于以前的alpha版本，现在似乎在angular2 beta版上不起作用：
<i *ngClass="['fa','fa-star']"></i>
它会产生一个错误：
例外: TypeError:无法读取后置@30:27中未定义的“fa”、“fa-star”中的属性“add”
我在这里错过了什么？
浏览 0提问于2015-12-29得票数 14
回答已采纳
我有一个包含大量内容的现有MVC应用程序。我想将其转换为Angular应用程序，添加任何新页面作为Angular，并在时间允许的情况下转换现有页面。简单地把时间花在转换整个应用程序上是不可行的。
基本上，这意味着我试图在同一个应用程序中运行角度页面和MVC视图，但我甚至不知道这是否可能。例如，我发现了一门关于Pluralsight的课程，在该课程中，MVC应用程序被转换，但不是逐位转换，现有的MVC视图仍然与新的Angular页面一起工作。
例如，如何才能使路由工作？
我正在到处寻找一些帮助，但没有成功，所以决定在这里张贴这个问题。
浏览 3提问于2021-05-12得票数 0
我一直在Angular 2中的一个自定义组件上工作，因为我试图学习绳索并进行切换，同时由于工作限制留在ES6/ES7中。假设我有一个这样定义的组件：
// Import Inject, Component and View constructor (for metadata)
import {Inject, Injectable} from 'angular2/core';
import {Component, View} from 'angular2/core';
// Import NgClass directive
import {NgClass} fro
浏览 7提问于2016-01-30得票数 2
我正在尝试通过单击不同组件中的其他按钮来更改按钮的样式。
现在，我有一个主html页面，页面上有一个使用angular选择器<component1></component1>加载的angular组件
下面是包含该组件的主html文件：
<button id="button01"
tappable>
<ion-icon name="square" [ngClass]="Btn1"><
浏览 0提问于2018-01-12得票数 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
我看过很多关于这个主题的帖子，但这对我没有帮助，因为我的场景在模块和库方面有很大的不同，这也是创建这个线程的原因，我配置了一个jenkins管道作业，试图执行npm install，它遇到了unable to resolve dependency tree，同样的快照已经附加。
这与jenkins无关，因为我已经尝试使用命令行实用程序安装相同的程序，这里还得到了依赖关系未解决的错误。
我无法弄清楚，在解决@coreui时出了什么问题--我也尝试过使用--legacy-peer-deps开关安装模块，但这也不适合我。
package.json
{
"name
浏览 3提问于2021-08-25得票数 1
在angular的ngClass指令中放置多个三元条件类的最佳方式是什么，其中的值是类名？
我已经尝试了几个变体，但我总是得到一个编译错误：
ng-class="$index > 2 ? 'l3 m4 s12 medium' : 'l4 m6 s12 medium', true ? 'red':'blue'
ng-class="{$index > 2 ? 'l3 m4 s12 medium' : 'l4 m6 s12 medium', true ? 'red
浏览 5提问于2015-06-14得票数 5
下面是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
1回答
我有一个组件来显示左边的框。此组件更改公共标志"flagBlocoLateral“，以标识此框是否可见。 import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-bloco-lateral',
template: `
<div class="bloco-lateral" [ngClass]="{'bloco-lateral--aberto':flagBlocoLateral}&#
浏览 14提问于2019-01-15得票数 1
回答已采纳
我在前端使用Angular 9创建了我的项目，在后端使用asp.net.core 3创建了我的项目，并将其上传到服务器端。现在，当我想要从服务器获取令牌或使用令牌时，我会遇到以下错误。 Access to XMLHttpRequest at 'https://**/api/Account/login' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass acce
浏览 24提问于2021-01-02得票数 1
<ul class="todo-list">
<li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone, editing: todo.editing}" >
<div class="view">
<input class="toggle"
type="checkbox"
[checked]
浏览 21提问于2020-03-27得票数 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
在我的项目中，我使用的是延迟加载，因此，在我的注册模块中，当我的注册表上有一些验证错误时，我使用[ngClass]指令添加无效类。但是，当试图在窗体上添加[ngClass]指令时，我的代码会抛出一个异常。
不能绑定到“ngClass”，因为它不是“输入”的已知属性
在研究错误本身时，我找到了几个解决方案，比如将‘指令: NgStyle’添加到组件中，但这并不能解决问题。
这是我的代码：
register.router.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule }
浏览 15提问于2018-01-16得票数 63
回答已采纳
2回答
我需要一些在angular的帮助。我想要添加abc类当show类添加和abc类隐藏当show类是隐藏我正在使用angular6我的条件如下请帮助我
<ul
[ngClass]="['show' === 'show' ? 'abc' : 'none-hightlight']"
*ngIf="cities.subcat.length>0"
class="first-sub-cat dropdown-menu">
浏览 0提问于2018-10-15得票数 0
1回答
我是angular 6的新手，正在做一个angular项目。我在提交form.Here代码后重置表单时遇到了一个问题：
<form [formGroup]="commentForm">
<div class="col-md-8 " [ngClass]="{ 'is-invalid': submitted && f.comment.errors }">
<textarea class="form-control" [(ngModel)]="comments
浏览 2提问于2019-04-27得票数 0
我正在编写一个angular应用程序，使用angular-ui-router来管理状态/路由。
在桌面浏览器(Chrome / Safari)上，这工作得很好。然而，在iPhone 4的iOS6上的Mobile Safari (以及iPhone 5上的iOS7)上，通过$state.go更改状态可能需要2秒。
我使用的是ngTouch，所以我不认为这是本机点击事件触发所需的300ms。不调用$state.go的ngClick属性现在看起来几乎可以即时工作。
我如何调试它来找出时间都花在哪里了？
浏览 8提问于2013-10-09得票数 6
10回答
Angular2禁用按钮
、、、
我知道在angular2中，我可以禁用具有[disable]属性的按钮，例如：
<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>
但是我可以使用[ngClass]或[ngStyle]来实现吗？如下所示：
<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>
谢谢。
浏览 122提问于2016-02-21得票数 119
回答已采纳
我即将开始一个javascript项目，并计划使用meteor框架。在玩流星网站的基础应用程序时，我注意到他们使用的是angular版本1.7.8。我想知道是否有可能使用更高版本的angular，比如6/7/8？这是可能的还是不受支持的？有人能帮帮我吗？
浏览 2提问于2019-11-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
