在 ng2 中動態顯示 Bootstrap 類

Question

我正在嘗試使用 Angular 2 顯示 Bootstrap 警報的動態類。

如果MessageType為 1，我想顯示 Success 消息和 2 為 Error 消息。 請看下面的示例

<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>

我試圖做如下動態類，但它根本不起作用：

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

添加-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;
    }
}

如何在 Html 中動態顯示“alert-success”或“alert-danger”類？ 我應該根據結果這樣做並在html中使用它嗎？

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

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

Answer 1

您還可以使用所需的 alert-x 類直接綁定到類：

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

Answer 2

將對象傳遞給[ngClass]而不是數組，因為現在您正在嘗試傳遞無效的數組對象混合。

使用數組只是告訴您要使用哪些類。

使用 object 來包含使特定類出現/消失的條件。

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