如何在html和angular 2中使用大于符号

我对angular 2很陌生。我尝试使用两种不同的css，基于对someid应用的数学运算的一些条件。如果id>10，那么css1应该应用于css2。 但它抛出了模板解析错误

html文件

 <ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)">

 <span [ngClass]= "{{hero.id}}>10'?'css-Fail':'css-Paas'"> {{hero.name}}****This line is throwing error****
 </span>

这应该行得通-

[ngClass]={'css-Green'：hero.id>10，'css Fail'：hero.id>=10}

如果您删除{{}

ngClass接受一个对象，{'css Fail'：hero.id>10，'css Pass'：hero.id>=10}，它将起作用。也许读？另外，这应该是Pass，而不是Paas，或者甚至是Green，你知道，实际上匹配你的CSS。

.css-Fail {
background-color:coral;
 }
 .css-Green{
background-color:green;
   }

<ul class="heroes"><li *ngFor="let hero of heroes" (click)="onSelect(hero)"> <span [ngClass]= "hero.id>10?'css-Fail':'css-Paas'"> {{hero.name}}