Angular2应用带有条件的css类答案

【问题标题】：Angular2 applying css classes with conditionsAngular2应用带有条件的css类
【发布时间】：2018-02-06 02:27:25
【问题描述】：

如果 displaysidebar 为真，我想申请一个带有 col-md-9 的类，否则类应该是 col-md-12

这是我尝试过但失败的方法

<div class=" displaysidebar ? col-md-9 : col-md-12 ">

我哪里错了？

【问题讨论】：

【解决方案1】：

应该是这样的

模板

 <div [ngClass]="(displaysidebar) ? 'col-md-9': 'col-md-12' ">

组件

   export class App {
      displaysidebar : boolean;
      constructor() {
        this.displaysidebar = true;
       }   

    }

【讨论】：

dv 感谢@jota haha，我想现在是支持社区的好方法
Rahul 您正在将字符串值分配给布尔变量。
@Faisal 感谢队友打错了我的错，在这里与某人发生口角感谢队友，我正在编辑它可能错过了它。首先它就像sidebar ===" true" 。我改为布尔值错过了。

【解决方案2】：

两种方式都可以：

<div [ngClass]="{'col-md-9': displaysidebar, 'col-md-12': !displaysidebar} ">

或

<div [ngClass]="displaysidebar? 'col-md-9': 'col-md-12';">

【讨论】：

【解决方案3】：

您需要将NgClass 与property binding 一起使用。

<div [ngClass]="displaysidebar ? 'col-md-9' : 'col-md-12'">

【讨论】：