ngIf - 他の2つのngIf条件対

Question

は、次のコードサンプルを考えてみましょう：私は同じ機能を実現することができます

<div *ngIf="condition; else elseBlock"> 
    <!-- markup here --> 
</div> 
<ng-template #elseBlock> 
    <div> 
     <!-- additional markup here --> 
    </div> 
</ng-template> 

もう一つの方法は次のとおりです。

<div *ngIf="condition"> 
    <!-- markup here --> 
</div> 
<div *ngIf="!condition"> 
    <!-- additional markup here --> 
</div> 

私はこれらのための具体的な理由を知りたいです2つの方法を使用する必要があり、なぜですか？

Answer 1

elseを使用すると、条件を2回書くのを避けることができます。これはバグの原因になる可能性があるため、優先的に使用します。あなたが選択した場合は、テンプレートの下部にelseテンプレートを置くこともできます。これにより、テンプレートを読みやすくなります。

あなたはasyncパイプで観察をアンラップしている場合、また別の内部のサブスクリプションを作成するために、角度強制する別の<div *ngIf="!(myitems | async)">を追加するよりも、

<div *ngIf="myItems$ | async as myItems; else noItemsYet"> 

を書き込むことがはるかに簡単です。

意見の問題としてこの質問を締めくくる人は間違っています。人々が何かに異なった意見を持っているかもしれないという事実は、価値のある有効なポイントがないことを意味するものではありません。

elseを使用している場合、単なる優先事項ではありませんでしたが、Angular開発者はAngular 4に優先順位を付けることになりました。

@Ishnarkが指摘しているように、パフォーマンスにも影響があります。

Answer 2

最初の解決策が優れています。どちらも同じことを達成していますが、最初はより洗練され、論理的に従うのが簡単です。

最初の解決方法は、です。理由は次のとおりです。

1. 条件を評価するには時間がかかります。
2. elseを使用すると、一度チェックするだけで済みます。 2番目の解決策では、条件が満たされているかどうか（時間がかかります）をチェックし、の条件が満たされていないかどうかを確認します。
3. elseを使用すると、何らかの条件が満たされていない場合に行うアクションを実行できます。

EDIT：unsafenessに対処する@ toazaburoの答えを参照してください。