Angular 2+模板中值的三元运算符

Question

我的模板中有这样的东西:

<span *ngIf="selectedSport.key === 'walking'"> steps </span>
<span *ngIf="selectedSport.key !== 'walking'"> km </span>

我觉得这个拼写很难看,而且这两条线就是这个......呃.所以我试着寻找替代方案.

NgIfElse

<span *ngIf="selectedSport.key === 'walking'; else elseSpan"> steps </span>
<ng-template #elseSpan> km </ng-template>

我发现这个更好,但是在多条件的情况下使用它可能很棘手*ngIf="A && B".我们在模板中仍然有两个代码行...

获得功能

<span> {{getUnit(selectedSport.key)}} </span>

getUnit(sportKey: string): string {
   return sportKey === 'walking' ? 'steps' : 'km';
}

随着模板的可读性越来越高,这样做会更好.但是我不希望在我的组件中添加一个函数.

你知道Angular 2+模板是否支持getUnit函数中的三元运算符？
你有更好的主意吗？

Answer 1

 <span> {{selectedSport.key === 'walking' ? 'steps' : 'km'}} </span>