Question

我有一个角度4模板如下。我正在尝试对[ngTemplateOutlet] =＆＃39; {{name}}！= xyz＆＃39; ...进行字符串比较，如下所示，但得到模板解析错误：意外字符＆＃34; EOF＆＃34; （你的模板中是否有未转义的＆＃34; {＆＃34;？使用＆＃34; {{＆＃39; {＆＃39;}}＆＃34;）来逃避它。请帮忙吗？

（代码参考：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>

Answer 1

Using {{ }} is for interpolation in places where the html is 'static' - e.g:

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

This is short-hand for:

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

Since you are doing property binding with [ ], the entire contents of the right-hand side will be evaluated as an expression, so doesn't need interpolation:

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

Have a look at the template syntax section of the Angular Cheatsheet to familiarise yourself with the different approaches.

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

1 个答案: