Что не так с моим угловым кодом? Я получаю:
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 2,.., 7 предоставляет несколько способов условного добавления классов:
введите один
[class.my-class]="step=='step1'"
тип два
[ngClass]="{'my-class': step=='step1'}"
и несколько вариантов:
[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
тип три
[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"
тип четыре
[ngClass]="(step=='step1')?'my-class1':'my-class2'"
[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
<!-- 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>
Другим решением будет использование [class.active].
Пример:
<ol class="breadcrumb">
<li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>
Нормальная структура для 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>
со следующими примерами вы можете использовать "ЕСЛИ ЕЩЕ"
<p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}">
<p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'">
<p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']">
Вы можете использовать ngClass для применения имени класса как условно, так и не в Angular
Пример
[ngClass]="'someClass'">
Условный
[ngClass]="{'someClass': property1.isValid}">
Множественное условие
[ngClass]="{'someClass': property1.isValid && property2.isValid}">
Выражение метода
[ngClass]="getSomeClass()"
Этот метод будет внутри вашего компонента
getSomeClass(){
const isValid=this.property1 && this.property2;
return {someClass1:isValid , someClass2:isValid};
}
Вы должны использовать что-то ([ngClass] вместо *ngClass) следующим образом:
<ol class="breadcrumb">
<li [ngClass]="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
(...)
В Angular 7.X
Классы CSS обновляются следующим образом, в зависимости от типа вычисления выражения:
string - добавлены CSS-классы, перечисленные в строке (разделенные пробелами)
Array - добавлены CSS-классы, объявленные как элементы Array.
Object-keys - это 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>
Пока я создавал реактивную форму, я должен был назначить 2 типа класса на кнопке. Вот как я это сделал:
<button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''"
[disabled]="!formGroup.valid">Sign in</button>
Когда форма действительна, кнопка имеет btn и btn-class (из начальной загрузки), иначе просто класс btn.
чтобы продлить Мостафа Машаехи его ответ на второй вариант> вы также можете связать несколько вариантов с помощью ",",
[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
Также * ngIf может использоваться в некоторых из этих ситуаций, обычно в сочетании с * ngFor
class="mats p" *ngIf="mat=='painted'"
Вот что сработало для меня:
[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"
Синтаксис ngClass:
[ngClass]="{'classname' : conditionFlag}"
Вы можете использовать как это:
<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>
Пусть YourCondition - это ваше условие или логическое свойство, тогда сделайте вот так
[class.yourClass]="YourCondition"
Не относится к директиве [ngClass], но я также получаю ту же ошибку, что и
Не удалось прочитать свойство 'удалить' из неопределенного в...
и я подумал, что это ошибка в моем состоянии [ngClass], но оказалось, что свойство, к которому я пытался получить доступ в условии [ngClass], не было инициализировано.
Как будто это было в моем файле для машинописи
element: {type: string};
и в моем [ngClass] я использовал
[ngClass]="{'active', element.type === 'active'}"
и я получаю ошибку
Невозможно прочитать свойство 'тип' из неопределенного в...
и решение было исправить мою собственность на
element: {type: string} = {type: 'active'};
Надеюсь, это поможет кому-то, кто пытается сопоставить состояние свойства в [ngClass]
Кроме того, вы можете добавить с помощью функции метода:
В HTML
<div [ngClass]="setClasses()">...</div>
В component.ts
// Set Dynamic Classes
setClasses() {
let classes = {
constantClass: true,
'conditional-class': this.item.id === 1
}
return classes;
}