Что не так с моим кодом 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>
Угловой 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>
Что's нормальное строение для 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 применять имя класса, как условно и не в угловой
Например
[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>
(...)
В Угловой 7.Х`
Классы CSS обновляются следующим образом, в зависимости от типа вычисления выражения:
строка - CSS-классов, перечисленных в строке (через пробел) добавляются
Массив - классы CSS, объявленные как добавили элементы массива
Объект - ключи CSS-классы, которые добавляются, когда выражение данного значения является значение истина, в противном случае они будут удалены.
`` <некоторые-элемент [ngClass]=" - а'первой секунды'" и>...</часть-элемент>
<некоторые-элемент [ngClass]=на"['и#39;, 'Второй']" и>...</часть-элемент>
<некоторые-элемент [ngClass]=с"{'и#39;: правда, 'Второй': правда, 'третий': ложные}" и>...</часть-элемент>
<некоторые-элемент [ngClass]="и я arrayExp stringExp||objExp&;>...</часть-элемент>
<некоторые-элемент [ngClass]=с"{'класс1 класс2 класс_3' : Истина}" и>...</часть-элемент> ``
Пока я создавал реактивную форму, мне пришлось присвоить 2 вида класса на кнопки. Это, как я сделал это:
<button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''"
[disabled]="!formGroup.valid">Sign in</button>
Если форма валидна, кнопка BTN и БТН-класса (от загрузки), иначе просто класс БТН.
чтобы продлить MostafaMashayekhi его ответ на второй вариант> вы также можете связать несколько вариантов с ','
[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>
Кроме того, можно добавить с функции метода:
В формате HTML
<div [ngClass]="setClasses()">...</div>
В компоненте.ТС
// Set Dynamic Classes
setClasses() {
let classes = {
constantClass: true,
'conditional-class': this.item.id === 1
}
return classes;
}
Давайте, YourCondition это ваше условие или логическое свойство, то сделать такой
[class.yourClass]="YourCondition"
Не актуально с [ngClass]
директива, но я также получаю ту же ошибку, как
не удается прочитать свойство 'удалить' не определено на...
и я думал, будут ошибки в моем [ngClass]
состоянии, но оказалось свойство я пытался открыть в состояние `[ngClass] не был инициализирован.
Как я имел это в моем машинопись файл
element: {type: string};
и в моем [ngClass]
я использовал
[ngClass]="{'active', element.type === 'active'}"
и я получаю ошибку
не удается прочитать свойство 'типа' не определено на...
и решение было исправить мою собственность в
element: {type: string} = {type: 'active'};
Надеюсь, что это помогает кто-то, кто пытается соответствовать условию недвижимость в [ngClass]