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