Angular: lớp có điều kiện với * ngClass

Có gì sai với mã Angular của tôi? Tôi đang nhận được:

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>

Phiên bản góc 2, ..., 9 cung cấp một số cách để thêm các lớp theo điều kiện:

loại một

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

loại hai

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

và nhiều tùy chọn:

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

loại ba

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

loại bốn

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

[ngClass]=...thay vì *ngClass.

* chỉ dành cho cú pháp tốc ký cho các chỉ thị cấu trúc, nơi bạn có thể sử dụng ví dụ

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

thay vì phiên bản tương đương dài hơn

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

Xem thêm 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>

Xem thêm https://angular.io/docs/ts/latest/guide/template-syntax.html

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>

Một giải pháp khác sẽ được sử dụng [class.active].

Thí dụ :

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

Đó là cấu trúc bình thường cho ngClass:

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

Vì vậy, trong trường hợp của bạn, chỉ cần sử dụng nó như thế này ...

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

với các ví dụ sau bạn có thể sử dụng 'IF ELSE'

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

Bạn có thể sử dụng ngClass để áp dụng tên lớp cả có điều kiện và không có trong Angular

Ví dụ

[ngClass]="'someClass'">

Có điều kiện

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

Nhiều điều kiện

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

Phương thức biểu đạt

[ngClass]="getSomeClass()"

Phương pháp này sẽ bên trong thành phần của bạn

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

Bạn nên sử dụng một cái gì đó ( [ngClass]thay vì *ngClass) như thế:

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

Trong Angular 7.X

Các lớp CSS được cập nhật như sau, tùy thuộc vào loại đánh giá biểu thức:

• chuỗi - các lớp CSS được liệt kê trong chuỗi (được phân cách bằng dấu cách) được thêm vào

• Mảng - các lớp CSS được khai báo là các phần tử mảng được thêm vào

• Khóa đối tượng là các lớp CSS được thêm vào khi biểu thức được đưa ra trong giá trị ước tính thành giá trị trung thực, nếu không chúng sẽ bị xóa.

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

để mở rộng MostafaMashayekhi câu trả lời của anh ấy cho tùy chọn hai> bạn cũng có thể xâu chuỗi nhiều tùy chọn với dấu ','

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

Ngoài ra * ngNếu có thể được sử dụng trong một số trường hợp này thường được kết hợp với * ngFor

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

Trong khi tôi đang tạo một hình thức phản ứng, tôi đã phải gán 2 loại lớp trên nút. Đây là cách tôi đã làm nó:

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

Khi biểu mẫu hợp lệ, nút có btn và btn-class (từ bootstrap), nếu không chỉ là lớp btn.

Ngoài ra, bạn có thể thêm bằng chức năng phương thức:

Trong HTML

<div [ngClass]="setClasses()">...</div>

Trong thành phần.ts

// Set Dynamic Classes
  setClasses() {
    let classes = {
      constantClass: true,
      'conditional-class': this.item.id === 1
    }

    return classes;
  }

Hãy để, YourCondition là điều kiện của bạn hoặc thuộc tính boolean, sau đó làm như thế này

[class.yourClass]="YourCondition"

ngClass cú pháp:

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

Bạn có thể sử dụng như thế này:

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

Đây là những gì làm việc cho tôi:

[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"

Bạn có thể sử dụng [ngClass] hoặc [class. Classname], cả hai sẽ hoạt động như nhau.
[class.my-class]="step==='step1'"

   HOẶC LÀ

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

Cả hai sẽ làm việc như nhau!

Không liên quan đến [ngClass]chỉ thị nhưng tôi cũng gặp lỗi tương tự như

Không thể đọc thuộc tính 'loại bỏ' không xác định tại ...

và tôi nghĩ đó là lỗi trong [ngClass]tình trạng của tôi nhưng hóa ra tài sản tôi đang cố truy cập trong điều kiện [ngClass]không được khởi tạo.

Giống như tôi đã có điều này trong tập tin bản thảo của tôi

element: {type: string};

và trong tôi [ngClass]đang sử dụng

[ngClass]="{'active', element.type === 'active'}"

và tôi đã nhận được lỗi

Không thể đọc thuộc tính 'loại' không xác định tại ...

và giải pháp là sửa tài sản của tôi thành

element: {type: string} = {type: 'active'};

Hy vọng nó sẽ giúp ai đó đang cố gắng phù hợp với điều kiện của một tài sản trong [ngClass]

<div class="collapse in " [ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''" id="collapseExampleOrganization" aria-expanded="true" style="">
 <ul> 	 <li class="nav-item" [ngClass]="{'active': active_tab=='manage'}">
<a routerLink="/main/organization/manage" (click)="activemenu('manage')"> <i class="la la-building-o"></i>
<p>Manage</p></a></li> 
<li class="nav-item" [ngClass]="{'active': active_tab=='assignservice'}"><a routerLink="/main/organization/assignservice" (click)="activemenu('assignservice')"><i class="la la-user"></i><p>Add organization</p></a></li>
</ul></div>

Mã là ví dụ tốt của ngClass nếu điều kiện khác.

[ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''"

[ngClass]="{'active': active_tab=='assignservice'}"

Hãy thử như thế này ..

Xác định lớp của bạn với ''

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