2017-03-21 1 views
0

Ich habe diese Schaltfläche:Angular 2 Möglichkeit des Hinzufügens bedingten Klassen zu HTML-Tags

<button class="btn btn-primary btn-sm" (click)="addSupplier(item)">Save</button> 

Ich möchte eine Klasse ‚behindert‘ hinzufügen, die nur angewendet werden, wenn eine bestimmte Bedingung erfüllt ist, und gilt nicht wenn es falsch ist.

Was ist die Angular 2-Methode? kam ich mit diesem Ansatz nach oben mit * ngIf aber es ist eine Menge Code:

<div *ngIf="item.productId && item.supplier"> 
    <button class="btn btn-primary btn-sm" (click)="addSupplier(item)">Save</button> 
</div> 
<div *ngIf="!item.productId || !item.supplier"> 
    <button class="btn btn-primary btn-sm disabled" (click)="addSupplier(item)">Save</button> 
</div> 
+0

Mögliche Duplikat [in Angular2 Klassen bedingt zuweisen] (http://stackoverflow.com/questions/39195742/assign-classes-conditionally-in-angular2) – stakx

+0

Die Antwort hier ist anders als die auf dem Link und ich mag es besser. Aber die Frage ist ein Duplikat. – etayluz

+0

Ich stimme zu, dass das als Duplikat korrekt gekennzeichnet ist. Aber warum sind die Antworten irrelevant, wenn sie anders oder besser sind? – etayluz

Antwort

1
<button class="btn btn-primary btn-sm" [class.disabled]="!item.productId || !item.supplier" (click)="addSupplier(item)">Save</button> 
2

Die gute alte ngClass in Angular 2. noch verfügbar ist, können Sie einen Versuch geben, wenn Sie wollen.

[ngClass]="{'my-class': isClassVisible }" 
0

Wenn Sie einfach versuchen, die Taste deaktivieren Sie keine CSS-Klasse benötigen, binden an [disabled] wie [disabled]="disableButton"

Verwandte Themen