anchor.diff:    :marked
       Don't forget the asterisk (`*`) in front of `ngFor`.
       For more information, see [\* and &lt;template>](#star-template).
  +    
  +    不要忘了`ngFor`前面的星号（`*`）。
  +    要了解更多，参见[\*与&lt;template>](#star-template)
   :marked
     The text assigned to `*ngFor` is the instruction that guides the repeater process.
  +  
  +  赋值给`*ngFor`的文本是一个用于指导重复器如何工作的“操作指南”。
   // #enddocregion directives-ngFor-3
   
   // #docregion directives-ngFor-4
   <a id="ngForMicrosyntax"></a>
   :marked
     #### NgFor microsyntax
  +  #### NgFor微语法
     The string assigned to `*ngFor` is not a [template expression](#template-expressions).
     It’s a *microsyntax* &mdash; a little language of its own that Angular interprets. In this example, the string "let hero of heroes" means:
  +  
  +  赋值给`*ngFor`的字符串并不是一个[模板表达式](#template-expressions)。
  +  它是一个 *微语法* —— 由Angular自己解释的小语言。在这个例子中，字符串`let hero of heroes`的含义是：
   
     >*Take each hero in the `heroes` array, store it in the local `hero` variable, and make it available to the templated HTML
     for each iteration.*
  +  
  +  >*取出`heroes`数组中的每个英雄，把它存在一个局部变量`hero`中，并且在每个迭代中让它对模板HTML可用*
   
     Angular translates this instruction into a new set of elements and bindings.
  +  Angular把这份“操作指南”翻译成一组“元素和绑定”。
   // #enddocregion directives-ngFor-4
   // #docregion directives-ngFor-5
   :marked
     In the two previous examples, the `ngFor` directive iterates over the `heroes` array returned by the parent component’s `heroes` property,
     stamping out instances of the element to which it is applied.
     Angular creates a fresh instance of the template for each hero in the array.
  +  
  +  在前面的两个范例中，`ngFor`指令在`heroes`变量上进行迭代（它是由父组件的`heroes`属性返回的），以其应用到的元素为模板“冲压”出很多实例。
  +  Angular为数组中的每个英雄创建了此模板的一个全新实例。
   
     The `let` keyword before "hero" creates a template input variable called `hero`.
  +  
  +  "hero"前面的`let`关键字创建了一个名叫`hero`的模板输入变量。
   
   .alert.is-critical
     :marked
        A template input variable is **not** the same as a [template reference variable](#ref-vars)!
  +     
  +     模板输入变量和[模板引用变量](#ref-vars)不是一回事儿！
   
   :marked
     We use this variable within the template to access a hero’s properties,
     as we’re doing in the interpolation.
     We can also pass the variable in a binding to a component element,
     as we're doing with `hero-detail`.
  +  
  +  我们在模板中使用这个变量来访问英雄的属性，就像在插值表达式中所做的那样。
  +  我们也可以把这个变量传给组件元素上的一个绑定，就像我们对`hero-detail`所做的那样。
   // #enddocregion directives-ngFor-5
   
   // #docregion directives-ngFor-6
   :marked
     #### NgFor with index
  +  #### 带索引的NgFor
     The `ngFor` directive supports an optional `index` that increases from 0 to the length of the array for each iteration.
     We can capture the index in a template input variable and use it in our template.
  +  
  +  `ngFor`指令支持一个可选的`index`，它在迭代过程中会从0增长到（当前数组的长度-1）。
  +  我们可以通过模板输入变量来捕获这个index，并把它用在模板中。
   
     The next example captures the index in a variable named `i`, using it to stamp out rows like "1 - Hercules Son of Zeus".
  +  
  +  下一个例子把index捕获到了一个名叫`i`的变量中，使用它“冲压出”像"1 - Hercules Son of Zeus"这样的条目。
   // #enddocregion directives-ngFor-6
   +makeExample('template-syntax/ts/app/app.component.html', 'NgFor-3')(format=".")
   // #docregion directives-ngFor-7
   .l-sub-section
     :marked
       Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/NgFor-directive.html).
  +    
  +    要学习更多的 *类似于index* 的值，例如`last`、`even`和`odd`，请参阅[NgFor API 参考](../api/common/NgFor-directive.html)。
   // #enddocregion directives-ngFor-7
   
   // #docregion directives-ngForTrackBy-1
  
positive.code: :marked
    <a id="safe-navigation-operator"></a>
    ### The safe navigation operator ( ?. ) and null property paths
  
    The Angular **safe navigation operator (`?.`)** is a fluent and convenient way to guard against null and undefined values in property paths.
    Here it is, protecting against a view render failure if the `currentHero` is null.
  // #enddocregion expression-operators-safe-1
  +makeExample('template-syntax/ts/app/app.component.html', 'safe-2')(format=".")
  // #docregion expression-operators-safe-2
  :marked
    Let’s elaborate on the problem and this particular solution.
  
    What happens when the following data bound `title` property is null?
  // #enddocregion expression-operators-safe-2
  +makeExample('template-syntax/ts/app/app.component.html', 'safe-1')(format=".")
  // #docregion expression-operators-safe-3
  :marked
    The view still renders but the displayed value is blank; we see only "The title is" with nothing after it.
    That is reasonable behavior. At least the app doesn't crash.
  
    Suppose the template expression involves a property path, as in this next example
    where we’re displaying the `firstName` of a null hero.
  
  code-example(format="" language="html").
    The null hero's name is {{nullHero.firstName}}
  // #enddocregion expression-operators-safe-3
  // #docregion expression-operators-safe-4
  :marked
    JavaScript throws a null reference error, and so does Angular:
  code-example(format="" language="html").
    TypeError: Cannot read property 'firstName' of null in [null]
  // #enddocregion expression-operators-safe-4
  // #docregion expression-operators-safe-5
  :marked
    Worse, the *entire view disappears*.
  
    We could claim that this is reasonable behavior if we believed that the `hero` property must never be null.
    If it must never be null and yet it is null,
    we've made a programming error that should be caught and fixed.
    Throwing an exception is the right thing to do.
  
    On the other hand, null values in the property path may be OK from time to time,
    especially when we know the data will arrive eventually.
  
    While we wait for data, the view should render without complaint, and
    the null property path should display as blank just as the `title` property does.
  
    Unfortunately, our app crashes when the `currentHero` is null.
  
    We could code around that problem with [NgIf](#ngIf).
  // #enddocregion expression-operators-safe-5
  +makeExample('template-syntax/ts/app/app.component.html', 'safe-4')(format=".")
  // #docregion expression-operators-safe-6
  :marked
    Or we could try to chain parts of the property path with `&&`, knowing that the expression bails out
    when it encounters the first null.
  // #enddocregion expression-operators-safe-6
  +makeExample('template-syntax/ts/app/app.component.html', 'safe-5')(format=".")
  // #docregion expression-operators-safe-7
  :marked
    These approaches have merit but can be cumbersome, especially if the property path is long.
    Imagine guarding against a null somewhere in a long property path such as `a.b.c.d`.
  // #enddocregion expression-operators-safe-7
  // #docregion expression-operators-safe-8
  :marked
    The Angular safe navigation operator (`?.`) is a more fluent and convenient way to guard against nulls in property paths.
    The expression bails out when it hits the first null value.
    The display is blank, but the app keeps rolling without errors.
  // #enddocregion expression-operators-safe-8
  +makeExample('template-syntax/ts/app/app.component.html', 'safe-6')(format=".")
  // #docregion expression-operators-safe-9
  :marked
    It works perfectly with long property paths such as `a?.b?.c?.d`.
  // #enddocregion expression-operators-safe-9
  
  // #docregion summary
  .l-main-section
  :marked
    ## Summary
    We’ve completed our survey of template syntax. Now it's time to put that knowledge to work as we write our own components and directives.
  // #enddocregion summary
  
negative.code:   from a *set* of possible element trees, based on some condition.
    Angular puts only the *selected* element tree into the DOM.
    
    当需要从 *一组* 可能的元素树中根据条件显示 *一个* 时，我们就把它绑定到`NgSwitch`。
    Angular将只把 *选中的* 元素树放进DOM中。
    
    Here’s an example:
    
    下面是例子：
  // #enddocregion directives-ngSwitch-1
  +makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch')(format=".")
  // #docregion directives-ngSwitch-2
  :marked
    We bind the parent `NgSwitch` directive to an expression returning a *switch value*.
    The value is a string in this example, but it can be a value of any type.
    
    我们把作为父指令的`NgSwitch`绑定到一个能返回 *开关值* 的表达式。
    本例中，这个值是字符串，但它也可能是任何类型的值。
  
    In this example, the parent `NgSwitch` directive controls a set of child `<span>` elements.
    A `<span>` is either pegged to a *match value* expression or marked as the default.
    
    这个例子中，父指令`NgSwitch`控制一组`<span>`子元素。
    每个`<span>`或者挂在一个 *匹配值* 表达式上，或者被标记为默认情况。
  
    **At any particular moment, at most one of these *spans* is in the DOM.**
    
    **任何时候，这些 *span* 中最多只有一个会出现在DOM中。**
  
    If the *span*’s *match value* equals the switch value, Angular adds the `<span>` to the DOM.
    If none of the *spans* is a match, Angular adds the default *span* to the DOM.
    Angular removes and destroys all other *spans*.
    
    如果这个 *span* 的 *匹配值* 与 *开关值* 相等，Angular就把这个`<span>`添加到DOM中。
    如果没有任何 *span* 匹配上，Angular就把默认的 *span* 添加到DOM中。
    Angular会移除并销毁所有其它的 *span* 。
  .l-sub-section
    :marked
      We could substitute any element for the *span* in this example.
      That element could be a `<div>` with a vast subtree of its own elements.
      Only the matching `<div>` and its subtree would appear in the DOM;
      the others would be removed.
      
      我们可以用任何其它元素代替本例中的 *span* 。
      那个元素可以是一个带有巨大子树的`<div>`。
      只有匹配的`<div>`和它的子树会显示在DOM中，其它的则会被移除。
  :marked
    Three collaborating directives are at work here:
    
    这里有三个相互合作的指令：
    1. `ngSwitch`: bound to an expression that returns the switch value
    1. `ngSwitch`：绑定到一个返回开关值的表达式
    1. `ngSwitchWhen`: bound to an expression returning a match value
    1. `ngSwitchWhen`：绑定到一个返回匹配值的表达式
    1. `ngSwitchDefault`: a marker attribute on the default element
    1. `ngSwitchDefault`：用于标记出默认元素的Attribute
  
  .alert.is-critical
    :marked
      **Do *not*** put the asterisk (`*`) in front of `ngSwitch`. Use the property binding instead.
      
      **不要** 在`ngSwitch`的前面放星号（`*`），而应该用属性绑定。
  
      **Do** put the asterisk (`*`) in front of `ngSwitchWhen` and `ngSwitchDefault`.
      For more information, see [\* and &lt;template>](#star-template).
      
      把星号（`*`） **放在** `ngSwitchWhen`和`ngSwitchDefault`的前面。
      要了解更多信息，参见[\*与&lt;template>](#star-template)。
  // #enddocregion directives-ngSwitch-2
  
  // #docregion directives-ngFor-1
  