ngTemplateOutlet 字符串比较模板解析错误

【问题标题】：ngTemplateOutlet string comparison template parse errorngTemplateOutlet 字符串比较模板解析错误
【发布时间】：2018-02-02 21:38:29
【问题描述】：

我有一个 Angular 4 模板，如下所示。我正在尝试对 [ngTemplateOutlet]='{{name}}!=xyz'... 进行字符串比较，如下所示，但出现模板解析错误：意外字符“EOF”（您的模板？使用 "{{ '{' }}") 转义它。有人可以帮忙吗？

（代码引用自：https://stackblitz.com/edit/angular-ng-container-conditional?file=app%2Fapp.component.html）

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<div>
  <h3>All Templates</h3>
  <ul *ngFor="let number of numbers">
    <ng-container [ngTemplateOutlet]='{{name}}!=xyz' ? even_tpl : odd_tpl' [ngTemplateOutletContext]="{number:number}"></ng-container>
  </ul>
  </div>

<ng-template #odd_tpl let-number='number'>
  <li>Odd: {{number}}</li>  
</ng-template>

<ng-template #even_tpl let-number='number'>
  <li>Even: {{number}}</li>  
</ng-template>

【问题讨论】：

标签： angular

【解决方案1】：

使用{{ }} 用于在 html 为“静态”的地方进行插值 - 例如：

<foo title="Hello {{name}}"></foo>

这是以下的简写：

 <foo [title]="'Hello ' + name">   </foo>

由于您正在使用[ ] 进行属性绑定，因此右侧的全部内容将被评估为表达式，因此不需要插值：

`[ngTemplateOutlet]="name!='xyz' ? even_tpl : odd_tpl"`

查看Angular Cheatsheet 的template syntax 部分以熟悉不同的方法。

【讨论】：