[解決済み] Angular 2+のテンプレートで値を表す三項演算子

質問

私のテンプレートには、次のようなものがあります。

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

このスペルはかなり醜いと思いましたし、このために2行も...。メチャクチャです。そこで、これに代わるものを探してみました。

NgIfElse

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

私はこちらの方が良いと思ったのですが、以下のような複数条件の場合、使いにくいかもしれません。 *ngIf="A && B" . そして、テンプレートにはまだ2つのコード行があります...。

取得関数

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

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

この方が、テンプレートが読みやすくなるので、かなり良いですね。しかし、私はこのためにコンポーネント内に関数を追加したくありません。

Angular 2+のテンプレートは、以下のような三項演算子をサポートしているか知っていますか？ getUnit 関数を使用できますか？
何か良いアイデアはないでしょうか？

解決方法は？

を使用することができます。 条件付き（三項）演算子 以下の例のように、テンプレート内で

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