私の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>
[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>
Angular 2、..、7は、条件付きでクラスを追加するいくつかの方法を提供します。
タイプワン
[class.my-class]="step=='step1'"
タイプ2
[ngClass]="{'my-class': step=='step1'}"
そして多数の選択:
[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
タイプ3
[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"
タイプ4
[ngClass]="(step=='step1')?'my-class1':'my-class2'"
別の解決策は[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>
以下の例では 'IF ELSE'を使用できます。
<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>
(...)
mostafaMashayekhiの選択肢2に対する答えを拡張する>複数の選択肢を '、'で連結することもできます
[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
* ngIfは、通常* ngForと組み合わせてこれらの状況の一部で使用することができます。
class="mats p" *ngIf="mat=='painted'"
リアクティブフォームを作成している間に、ボタンに2種類のクラスを割り当てる必要がありました。これが私のやり方です。
<button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''"
[disabled]="!formGroup.valid">Sign in</button>
フォームが有効な場合、buttonは(ブートストラップから)btnとbtn-classを持ちます。
Angular 7.X
内
式の評価の種類に応じて、CSSクラスは次のように更新されます。
string - 文字列(スペース区切り)にリストされたCSSクラスが追加されます。Array - Array要素として宣言された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>
これは私にとってうまくいったことです[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"
YourConditionがあなたの条件またはブール値のプロパティであるとしましょう。
[class.yourClass]="YourCondition"
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>