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

Question

我对 angular 2 很陌生。我正在尝试根据某些条件使用 2 个不同的 css，基于应用于 someid 的数学运算。如果 id > 10 则应应用 css 1 否则 css 2。但是它抛出模板解析错误。

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>

css 文件

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

Answer 1

这应该有效 --

[ngClass]="{'css-Green': hero.id>10, 'css-Fail': hero.id>=10 }"

Answer 2

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

如果您删除 {{ }} 它将起作用

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

How to use greater than symbol in html with angular 2

angular2-forms

angular2-routing

angular