标签: angular-ng-class

我的Angular代码出了什么问题？我正进入(状态:

Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ...

HTML

<ol class="breadcrumb">
    <li *ngClass="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
    <li *ngClass="{active: step==='step2'}"  (click)="step='step2'">Step2</li>
    <li *ngClass="{active: step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

在Angular中,我想使用ngClass和click事件来切换类.我通过在线查看,但有些是angular1,没有任何明确的指示或示例.任何帮助都感激不尽!

在HTML中,我有以下内容:

<div class="my_class" (click)="clickEvent($event)"  ngClass="{'active': toggle}">                
     Some content
</div>

在.ts:

 clickEvent(event){
    //Haven't really got far
    var targetEle = event.srcElement.attributes.class;        
 }     

以下片段之间Angular 2的区别是什么:

<div [class.extra-sparkle]="isDelightful">
<div [ngClass]="{'extra-sparkle': isDelightful}">

我想从变量添加类名，但它依赖于 Angular 9 中的另一个变量。

这是我的 TypeScript 代码

export class InputComponent implements OnInit {
  @Input() inputBlockClass = 'col-12 d-flex px-0';
  @Input() inputBlockExtraClass = 'col-md-9';
  @Input() showLabel = true;

  // ...
}

这是我的 HTML 代码：

<div [class]="inputBlockClass" [class.inputBlockExtraClass]="showLabel">

我也尝试过这个，但它不起作用：

<div [class]="inputBlockClass" [ngClass]="{inputBlockExtraClass: showLabel}">

两种解决方案均给出以下结果：

<div _ngcontent-sxj-c111="" class="col-12 d-flex px-0 inputBlockExtraClass">

但我想要这个：

<div _ngcontent-sxj-c111="" class="col-12 d-flex px-0 col-md-9">

如何从变量添加类名取决于布尔变量？

我有两个锚标签

 <ul class="switchNav">
          <li [ngClass]="!hidePanel2 ? 'active' : ''">
            <a href="javascript:void(0)" (click) ="hideShowPanel(1)">panel 1</a>
          </li>
          <li [ngClass]="!hidePanel1? 'active' : ''">
            <a href="javascript:void(0)" (click) ="hideShowPanel(2)">panel 2</a>
          </li>
        </ul>

.ts

hidePanel2: boolean  = true;
 hidePanel1: boolean  = false;

 hideShowPanel(check: number) {
    if (check == 1) {
      this.hidePanel2 = true;
      this.hidePanel1 = false;
    }
    else {
      this.hidePanel1 = false;
      this.hidePanel2 = true;
    }

  }

当我单击锚标记时，它将引发错误

ExpressionChangedAfterItHasBeenCheckedError

它正在运行，但是由于团队成员更新了任何模块，因此它停止了工作，

我在Google上搜索了很多，但无法正常运行

请帮忙

谢谢

我有一个ngClass条件,在没有空格的类名称上运行正常,但是当我尝试执行类似下面的操作并且在按钮单击时切换isTrue时,类会从"btn btn-primary"更改为"btn-default".那里的空间似乎正在抛弃它.我错过了什么

[ngClass]="{ 'btn btn-default': isTrue, 'btn btn-primary': !isTrue}"

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>

注意:我已经导入了通用模块

import {CommonModule} from "@angular/common"

库版本角4.0.1