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

【问题标题】：Ternary operator for values in Angular 2+ templateAngular 2+模板中值的三元运算符
【发布时间】：2019-01-21 09:34:04
【问题描述】：

我的模板中有这样的内容：

<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 函数中的三元运算符？
你有更好的主意吗？

【问题讨论】：

你试过<span> {{selectedSport.key === 'walking' ? 'steps' : 'km')}} </span>吗？

标签： html angular typescript

【解决方案1】：

如果你想要多个三元运算符，你可以这样使用

 <span >{{this.commentsType === itemType.All ? counter.allCounts : this.commentsType === itemType.Project ? counter.projectCount : this.commentsType === itemType.Customer ? counter.customerCommunication : 0}}</span>

【讨论】：

【解决方案2】：

您可以在模板内部使用Conditional (ternary) operator，如下例所示

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

【讨论】：

感谢@narendra-jadhav 改进了我的回答。
只是为了扩展可观察值，您必须将可观察和异步管道包装在括号中，例如 {{ (someObs$ | async) === 'someValue' ？ '如果为真则输出' : '如果为假则输出' }}

【解决方案3】：

您似乎正在尝试显示所选运动的单位。
最好将逻辑保留在控制器中并填充到模型中对象和视图只显示模型。
稀释逻辑视图层可能不是更好的设计并且违反了单一法则责任。

【讨论】：