ng-book 2 - 003

第四章：内置指令

• ngIf ：如果你希望根据一个条件来决定显示或隐藏一个元素，可以使用ngIf指令。这个条件是由你传给指令的表达式的结果决定的。
  如果表达式的结果返回的是一个假值，那么元素会从DOM上被移除。
• ngSwitch ：对表达式进行一次求值，然后根据其结果来决定如何显示指令类嵌套的元素。
  一旦有了结果，我们就可以：
  • 使用ngSwitchCase指令描述已知结果；
  • 使用ngSwitchDefault指令处理所有其他未知的情况。

  <div class="container" [ngSwitch]="myVar">
      <div *ngSwitchCase=" 'A' ">Var is A</div>
      <div *ngSwitchCase=" 'B' ">Var is B</div>
      <div *ngSwitchDefault>Var is something else</div>
  </div>
  

  ngSwitchDefault元素是可选的。如果我们不用它，那么当myVar没有匹配到任何期望的值时不会渲染任何东西。
• ngStyle：通过Angular表达式给特定的DOM元素设定CSS属性。

  <div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
      Uses fixed white text on blue background
  </div>
  

• ngClass：动态的设置和改变一个给定DOM元素的CSS类
• ngFor：重复一个给定的DOM元素（或一组DOM元素），每次重复都会从数组中取一个不同的值。
  他的语法是*ngFor="let item of items"
  • let item 语法指定一个用来接收items数组中每个元素的（模板）变量。
  • items是来自组件控制器的一组项的集合。
• ngNonBindable：告诉Angular不要编译或者绑定页面中的某个特殊部分。