web-dev-qa-db-ja.com

Angular 2+テンプレートの値の3項演算子

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

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

私はこの綴りをかなり醜く見つけました、そしてこのための2行... Meh。だから私はこれに代わるものを探してみました。

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関数のように三項演算子をサポートするかどうか知っていますか？
何か良いアイデアはありますか？

htmlangulartypescript
11
Augustin R
<span> {{selectedSport.key === 'walking' ? 'steps' : 'km'}} </span>
7
Krishna Rathore
  • 選択したスポーツの単位を表示しようとしているようです。
  • ロジックをコントローラーに保持し、それをモデルオブジェクトに入力して、モデルを表示するだけで表示することをお勧めします。
  • ビューレイヤーのロジックを希釈すると、デザインが改善されず、単一責任の法則に違反する可能性があります。
1
Ramanathan Ganesan