Angular2应用具有条件的css类

Question

如果displayidebar为true，我想应用col-md-9的类，否则类应为col-md-12

这是我尝试但无法正常工作

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

我哪里错了？

Answer 1

您需要NgClass和property binding一起使用。

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

Answer 2

可以做任何一种方式：

function handleKeyDown(e) {
  // **** I need some way to access outside data in here some how..
  //      whether it's passed as a parameter or any other way
  console.log(e.keyCode);
}

const PlaylistPages = SortableContainer(( props ) => {
  return (
    <div className="playlist-sortable" onKeyDown={handleKeyDown} tabIndex="0">
    // etc
  );
}

或

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

Answer 3

应该是

模板

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

<强>组件

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

    }