[解決済み] テンプレート内の *ngIf else if
2022-04-24 07:17:28
質問
の中に複数のケースを持つにはどうしたらよいでしょうか?
*ngIf
ステートメントを使用します。私はVueやAngular 1で
if
,
else if
および
else
が、Angular 4では
true
(
if
) と
false
(
else
) 条件を満たしている。
ドキュメントによると、私は唯一の行うことができます。
<ng-container *ngIf="foo === 1; then first else second"></ng-container>
<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>
しかし、複数の条件(のようなもの)を持ちたいのです。
<ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container>
<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>
しかし、私は結局のところ
ngSwitch
というのは、ハックされたような感じがします。
<ng-container [ngSwitch]="true">
<div *ngSwitchCase="foo === 1">First</div>
<div *ngSwitchCase="bar === 2">Second</div>
<div *ngSwitchDefault>Third</div>
</ng-container>
また、Angular 1やVueで慣れた構文の多くがAngular 4ではサポートされていないようなので、このように条件を指定してコードを構成するにはどのような方法が推奨されますか?
どのように解決するのですか?
もう一つの方法は、条件をネストすることです。
<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
<ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>
関連
-
[解決済み] template "と "typename "キーワードはどこに、なぜ入れなければならないのですか?
-
[解決済み] NGIf else "の使い方を教えてください。
-
[解決済み] コンポーネントテンプレートで要素を選択するには?
-
[解決済み] C++テンプレート関数定義の.CPPファイルへの格納
-
[解決済み] 最後のページに戻るには
-
[解決済み] Angularアプリを本番用にバンドルする方法
-
[解決済み】*ngIfの@ViewChild
-
[解決済み】*ngIfと*ngForが同じ要素にあるとエラーになる件
-
[解決済み] Angular CLI Error: serveコマンドはAngularプロジェクトで実行する必要がありますが、プロジェクト定義が見つかりませんでした。
-
[解決済み] '合成プロパティ @panelState を発見しました。BrowserAnimationsModule" か "NoopAnimationsModule" のどちらかを入れてください'。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Angularインタビュー質問まとめ1~基礎知識(Angular v8+)編
-
[解決済み] 現在のルートを取得する方法
-
[解決済み] Angularのエラーです。"Can't bind to 'ngModel' because it isn't a known property of 'input'"."
-
[解決済み] Angularアプリを本番用にバンドルする方法
-
[解決済み] Angular 2のキープレスごとの変更イベント
-
[解決済み] 例外が発生しました。既知のネイティブプロパティではないため、'ngFor'にバインドできない
-
[解決済み] viewchildを使用して複数のviewchildrenにアクセスする
-
[解決済み] angular2 tslintの警告を止めるためにコンポーネントのデフォルトプレフィックスを変更する方法
-
[解決済み] prodのバンドルサイズを小さくするには?
-
[解決済み] エラーが発生しました。出力が初期化されていません