Angular: conditional class with * ngClass
Co jest nie tak z moim kanciastym kodem? I am getting: Nie można odczytać właściwości 'remove' undefined w BrowserDomAdapter.removeClass ...
<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>
20 answers
Angular Wersja 2 + zapewnia kilka sposobów dodawania klas warunkowo:
Typ pierwszy
[class.my-class]="step === 'step1'"
Typ drugi
[ngClass]="{'my-class': step === 'step1'}"
I wiele opcji:
[ngClass]="{'my-class': step === 'step1', 'my-class2':step === 'step2' }"
Typ trzeci
[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"
Typ czwarty
[ngClass]="(step=='step1')?'my-class1':'my-class2'"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-20 00:32:09
[ngClass]=...
zamiast *ngClass
.
*
jest tylko dla skrótowej składni dyrektyw strukturalnych, gdzie można na przykład użyć
<div *ngFor="let item of items">{{item}}</div>
Zamiast dłuższej wersji równoważnej
<template ngFor let-item [ngForOf]="items">
<div>{{item}}</div>
</template>
Zobacz też 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>
Zobacz też 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-28 07:51:14
Innym rozwiązaniem byłoby użycie [class.active]
.
Przykład:
<ol class="breadcrumb">
<li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-08 12:22:58
To normalna struktura ngClass
to:
[ngClass]="{'classname' : condition}"
Więc w Twoim przypadku użyj tego w ten sposób...
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-24 06:19:02
Z poniższymi przykładami można użyć "IF ELSE"
<p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}">
<p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'">
<p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-21 08:40:08
Możesz użyć ngClass, aby zastosować nazwę klasy zarówno warunkowo, jak i nie w Angular
Na Przykład
[ngClass]="'someClass'">
Warunkowe
[ngClass]="{'someClass': property1.isValid}">
Multiple Condition
[ngClass]="{'someClass': property1.isValid && property2.isValid}">
Wyrażenie metody
[ngClass]="getSomeClass()"
Ta metoda będzie wewnątrz twojego komponentu
getSomeClass(){
const isValid=this.property1 && this.property2;
return {someClass1:isValid , someClass2:isValid};
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-16 09:49:32
Powinieneś użyć czegoś ([ngClass]
zamiast *ngClass
) w ten sposób:
<ol class="breadcrumb">
<li [ngClass]="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
(...)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-08 12:05:39
W Angular 7.X
Klasy CSS są aktualizowane w następujący sposób, w zależności od typu oceny wyrażenia:
-
String-klasy CSS wymienione w łańcuchu (rozdzielane spacjami) są dodawane
-
Array-dodawane są klasy CSS zadeklarowane jako elementy tablicy
Klucze obiektowe są klasami CSS, które są dodawane, gdy wyrażenie podane w wartości jest prawdziwe, w przeciwnym razie są one usuwane.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-27 05:36:41
Aby rozszerzyć MostafaMashayekhi jego odpowiedź dla opcji drugiej> możesz również połączyć wiele opcji za pomocą", "
[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
Również *ngif może być używany w niektórych z tych sytuacji zwykle w połączeniu z *ngFor
class="mats p" *ngIf="mat=='painted'"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-07 18:25:53
Dodatkowo można dodać za pomocą funkcji metody:
W HTML
<div [ngClass]="setClasses()">...</div>
W skład.ts
// Set Dynamic Classes
setClasses() {
let classes = {
constantClass: true,
'conditional-class': this.item.id === 1
}
return classes;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-28 19:29:12
Kiedy tworzyłem formularz reaktywny, musiałem przypisać 2 rodzaje zajęć na przycisku. Tak to zrobiłem:
<button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''"
[disabled]="!formGroup.valid">Sign in</button>
Gdy formularz jest poprawny, button ma klasę btn i BTN (od bootstrap), w przeciwnym razie tylko klasę btn.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-06 23:49:11
Niech, twój stan jest Twoim warunkiem lub właściwością boolowską, to zrób tak
[class.yourClass]="YourCondition"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-03-20 06:15:49
ngClass
składnia:
[ngClass]="{'classname' : conditionFlag}"
Możesz użyć tak:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-19 05:53:59
To mi się udało:
[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-28 10:38:44
Możesz użyć [ngClass] lub [class.classname], obie będą działać tak samo.[class.my-class]="step==='step1'"
Lub
[ngClass]="{'my-class': step=='step1'}"
Oba będą działać tak samo!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-31 11:19:12
Nie dotyczy dyrektywy [ngClass]
ale też otrzymywałem ten sam błąd co
Nie można odczytać właściwości 'remove' undefined at...
I myślałem, że to błąd w moim warunku [ngClass]
, ale okazało się, że właściwość, do której próbowałem uzyskać dostęp w warunku [ngClass]
, nie została zainicjowana.
Jakbym miał to w moim pliku maszynopisu
element: {type: string};
I w moim [ngClass]
używałem
[ngClass]="{'active', element.type === 'active'}"
And I was getting the error
Nie można odczytać właściwość "type" of undefined at...
I rozwiązaniem było naprawienie mojej własności
element: {type: string} = {type: 'active'};
Mam nadzieję, że pomoże to komuś, kto próbuje dopasować stan nieruchomości w [ngClass]
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-18 09:18:04
Możemy uczynić klasę dynamiczną używając następującej składni. W Angular 2 plus można to zrobić na różne sposoby:
[ngClass]="{'active': arrayData.length && arrayData[0]?.booleanProperty}"
[ngClass]="{'active': step}"
[ngClass]="step== 'step1'?'active':''"
[ngClass]="step? 'active' : ''"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-18 21:31:33
<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>
Kod jest dobrym przykładem stanu ngClass if else.
[ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''"
[ngClass]="{'active': active_tab=='assignservice'}"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-10 07:10:28
Spróbuj tak..
Zdefiniuj klasę za pomocą "
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-08 14:02:29
For elseif
statement (less comparison) use like that: (For example you comparison three statement)
<div [ngClass]="step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')"> {{step}} </div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-07 13:42:00