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

Posted 2023-03-05

【中文标题】Angular 2+模板中值的三元运算符

【英文标题】：Ternary operator for values in Angular 2+ template

【发布时间】：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>吗？

【参考方案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】：

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