Angular：带有* ngClass的条件类

11 回答

• 64

  使用以下示例，您可以使用IF ELSE

  <p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}">
  <p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'">
  <p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']">
  

  回复于 2024-05-02T13:56:50+08:00
• 2

  你应该使用这样的东西（ [ngClass] 而不是 *ngClass ）：

  <ol class="breadcrumb">
    <li [ngClass]="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
    (...)
  

  回复于 2024-05-02T13:56:50+08:00
• 442

  扩展MostafaMashayekhi他对选项二的答案>你也可以用'，'链接多个选项

  [ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
  

  此外，* ngIf可用于某些情况，通常与* ngFor结合使用

  class="mats p" *ngIf="mat=='painted'"
  

  回复于 2024-05-02T13:56:50+08:00
• 9

  [ngClass]=... 而不是 *ngClass .

  * 仅用于结构指令的简写语法，例如您可以使用它

  <div *ngFor="let item of items">{{item}}</div>
  

  而不是更长的等效版本

  <template ngFor let-item [ngForOf]="items">
    <div>{{item}}</div>
  </template>
  

  另见https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

  <some-element [ngClass] =“'first second'”> ... </ some-element>
  <some-element [ngClass] =“['first'，'second']”> ... </ some-element>
  <some-element [ngClass] =“{'first'：true，'second'：true，'third'：false}”> ... </ some-element>
  <some-element [ngClass] =“stringExp | arrayExp | objExp”> ... </ some-element>
  <some-element [ngClass] =“{'class1 class2 class3'：true}”> ... </ some-element>

  另见https://angular.io/docs/ts/latest/guide/template-syntax.html

  <！ - 使用属性 - >切换“特殊”类的开/关

  <div [class.special] =“isSpecial”>类绑定是特殊的</ div>

  <！ - 绑定到class.special胜过类属性 - >

  <div class =“special” [class.special] =“！isSpecial”>这个不是那么特别</ div>

  <！ - 使用绑定 - >重置/覆盖所有类名

  <div class =“bad curly special” [class] =“badCurly”>卷曲</ div>

  回复于 2024-05-02T13:56:50+08:00
• 47

  Angular 2提供了一些添加类条件的方法

  有不同的类型：

  type one

  [class.my-class]="step=='step1'"
  

  type two

  [ngClass]="{'my-class': step=='step1'}"
  

  type three

  [ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"
  

  type four

  [ngClass]="(step=='step1')?'my-class1':'my-class2'"
  

  回复于 2024-05-02T13:56:50+08:00
• 301

  另一种解决方案是使用 [class.active] .

  示例：

  <ol class="breadcrumb">
      <li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
  </ol>
  

  回复于 2024-05-02T13:56:50+08:00
• 4

  这是 ngClass 的正常结构是：

  [ngClass]="{'classname' : condition}"
  

  所以在你的情况下，就像这样使用它......

  <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>
  

  回复于 2024-05-02T13:56:50+08:00
• 23

  您可以使用ngClass有条件地应用类名，而不是在Angular中

  例如

  [ngClass]="'someClass'">
  

  Conditional

  [ngClass]="{'someClass': property1.isValid}">
  

  Multiple Condition

  [ngClass]="{'someClass': property1.isValid && property2.isValid}">
  

  Method expression

  [ngClass]="getSomeClass()"
  

  This method will inside of your component

  getSomeClass(){
          const isValid=this.property1 && this.property2;
          return {someClass1:isValid , someClass2:isValid};
      }
  

  回复于 2024-05-02T13:56:50+08:00
• 22

  当我创建一个反应形式时，我不得不在按钮上分配两种类型的类 . 我就这样做了：

  <button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''" 
  [disabled]="!formGroup.valid">Sign in</button>
  

  当表单有效时，按钮有btn和btn-class（来自bootstrap），否则只有btn类 .

  回复于 2024-05-02T13:56:50+08:00
• 5

  这对我有用 [ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"

  回复于 2024-05-02T13:56:50+08:00
• 1

  在 Angular 7.X

  CSS类更新如下，具体取决于表达式求值的类型：

  string - 添加字符串中列出的CSS类（空格分隔），Array - 添加声明为Array元素的CSS类，Object - keys是当值中给出的表达式计算为truthy值时添加的CSS类，否则他们会被删除 .

  <some-element [ngClass]="'first second'">...</some-element>
  
  <some-element [ngClass]="['first', 'second']">...</some-element>
  
  <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
  
  <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
  
  <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
  

  回复于 2024-05-02T13:56:50+08:00