ngIfクラスが要素上に存在するかどうかチェックする

Question

要素に特定のクラスがあるかどうかをチェックするために* ngIfを使用する方法はありますか？私は、未定義のプロパティimgViewを読み取ることができないエラーを投げ

<img *ngIf="[class.imgView]" class="imgView" src=".."> 

を使用してみました。

角度でどのように達成する方法はありますか？

Answer 1

をいくつかのブール値がtrueの場合、あなたが必要とするクラスを返す関数行います

returnClass = true; 
getClass() { 
    if(this.returnClass) { 
     return "myView"; 
    } else { 
     return ""; 
    } 
} 

をし、あなたのビューを変更：今すぐ

<img *ngIf="returnClass" [ngClass]="getClass()" src=".."> 

returnClassが真の場合、imgには希望のクラスがあるので、を渡すことができますに*ngIf

また、クラスを削除することもできます：this.returnClass = falseこれも要素を隠すでしょう。

これは多くのクラスでは面倒になりますが、いくつかは妥当です。ここで

Answer 2

この例では役立つかもしれない： Hi, we are <span [style.color]="inputElement.value === 'yes' ? 'blue' : ''"> {{name}} </span> <br> <br> <span [class.purple]="isPurple.value === 'lila'">Colorful</span> <input type="text" #isPurple (keyup)="0"> <span [class.is-awesome]="inputElement.value === 'yes'">Is it awesome?</span> <input type="text" #inputElement (keyup)="0"><br> <button [disabled]="inputElement.value !== 'yes'">Only enabled if 'yes' was entered</button> <br>

Answer 3

は、迅速なソリューションです：

@Component({ 
    selector: 'app', 
    template: ` 
     <p class="imgView test" #test [hidden]="hasClass(test)">shown</p> 
     <p #test1 [hidden]="hasClass(test1)">hidden</p> 
     <p class="imgView" #test2 [hidden]="hasClass(test2)">shown</p>` 
}) 
export class App { 
    hasClass(el: any) { 
    return !(el.getAttribute('class') && el.getAttribute('class').indexOf('imgView') !== -1); 
    } 
}; 

* ngIfは、このアプローチでは動作しませんが、あなたが使用する必要があるので、私は[隠された]と* ngIfを交換しました[隠さ]このシナリオで任意の方法。ここで

により、たとえばngForでこれを使用する必要がある場合、これはあなたがそれを行うだろうかあるplunker

です：

ng2: How to create variable in ngFor loop