Dynamische Anzeigen von Bootstrap-Klassen in NG2

Question

Ich versuche, mithilfe von Angular 2.

dynamische Klassen für Bootstrap Warnungen anzuzeigen Wenn die MessageType 1, ich will Erfolgsmeldung und 2 für die Fehlermeldung angezeigt werden soll. Bitte beachten Sie die Probe unter

<div class="alert alert-success" role="alert"> 
    Your data has been saved successfully. 
</div> 

<div class="alert alert-danger" role="alert"> 
    Error occurred!!! Try again. 
</div> 

Ich habe versucht, die dynamische Klasse wie die folgenden zu tun, aber es funktioniert nicht funktionieren:

<div [ngClass]="['alert', 'alert-success': MessageType == 1, 'alert-danger' : MessageType == 2]" *ngIf="Message"> 
    {{Message}} 
</div> 

Add-todo.component.ts

export class TodoAddComponent { 

    Message: string; 
    MessageType: number; 


    AddItem(): void { 

     // do some processing 

     this.Message = "New Item has been added"; 
     this.MessageType = 1; 
    } 
} 

Wie kann ich die Klasse 'alert-success' oder 'alert-danger' dynamisch im HTML anzeigen? Soll ich es so nach dem Ergebnis machen und es in HTML wieder verwenden?

alertClass: string; 
this.alertClass = 'alert-success'; // if it succeeds 

this.alertClass = 'alert-danger'; // if it fails 

Answer 1

Pass, ein Objekt zu [ngClass] anstelle eines Arrays, weil gerade jetzt ungültige Array-Objekt Hybrid passieren Sie versuchen.

Verwenden Sie Array, um nur zu sagen, welche Klassen Sie verwenden möchten.

Verwenden Sie das Objekt, um Bedingungen einzufügen, die bestimmte Klassen erscheinen/verschwinden lassen.

<div [ngClass]="{alert: true, 'alert-success': MessageType == 1, 'alert-danger': MessageType == 2 }" *ngIf="Message"> 
    {{Message}} 
</div> 

Answer 2

Sie auch direkt in der Klasse mit der erforderlichen Alarm-x Klasse binden könnten:

<div *ngIf="Message" 
     class="alert" 
    [class.alert-success]="MessageType == 1" 
    [class.alert-danger]="MessageType == 2"> 
    {{Message}} 
</div>