Question

我正在尝试使用Angular 2显示Bootstrap警报的动态类。

如果MessageType为1，我想显示成功消息，2显示错误消息。请参阅下面的示例

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

如何显示班级＆＃39;警报 - 成功＆＃39;或者警报危险＆＃39;动态地在Html中？我应该根据结果这样做，并在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>

在ng2中动态显示Bootstrap类

2 个答案: