角4 | * ngIfがトリガーされたときに余分なdivを作成する

Question

こんにちは、私はここでやっていますか？私はAPIデータを呼び出していますが、の場合の場合は、falseに検証すると余分なdivを作成するようです。

<div *ngFor="let apidata of data"> 
    <div class="box" *ngIf="apidata.Zone == 8"> 
     <div class="box-assignmentnumber-holder"> 
     <span id="AssignmentNumber">{{apidata.Assignment}}</span> 
     </div> 
     <div class="newAssignment"> 
     <span>{{ apidata.Operator == null ? 'New' : apidata.Operator }}</span> 
     </div> 
    </div> 
    </div> 

私のコードで余分なdivを削除するにはどうすればよいでしょうか？

例

<div></div> <---extra div when false 
<div></div> <---extra div when false 
<div class="box"> 
    <div class="box-assignmentnumber-holder"> 
      <span>123123</span> 
    </div> 
</div> 
<div></div> <---extra div when false 

Answer 1

あなたがする必要があるのは*ngForのng-containerでdivを置き換えるです：

<ng-container *ngFor="let apidata of data"> 
    <div class="box" *ngIf="apidata.Zone == 8"> 
     <div class="box-assignmentnumber-holder"> 
      <span id="AssignmentNumber">{{apidata.Assignment}}</span> 
     </div> 
     <div class="newAssignment"> 
      <span>{{ apidata.Operator == null ? 'New' : apidata.Operator }}</span> 
     </div> 
    </div> 
<ng-container> 

条件がfalseある場合、これはdivs余分を作成しません。関係なく、あなたの状態の

WORKING DEMO

Answer 2

..下になり、余分なdiv要素を作成することを避けるために代わりのdiv

のng-containerを利用して、我々は代わりに NG-コンテナディレクティブを使用することができます。

ng-container *ngIf="lessons"> 
    <div class="lesson" *ngFor="let lesson of lessons"> 
     <div class="lesson-detail"> 
      {{lesson | json}} 
     </div> 
    </div> 
</ng-container> 

ng-containerディレクティブは、 という要素を提供し、ページのセクションに構造ディレクティブ（ ）を追加するだけで、余分な要素を作成する必要はありません。

ng-containerディレクティブのもう1つの主要な使用例があります。 は、ページを に動的に挿入するためのプレースホルダを提供することもできます。

リファレンス - https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

Answer 3

あなたは常にのでループ

<div *ngFor="let apidata of data"> 

で作成したdiv要素が、これは何イムあるこの

<ng-container *ngFor="let apidata of data"> 
    <div class="box" *ngIf="apidata.Zone == 8"> 
     <div class="box-assignmentnumber-holder"> 
      <span id="AssignmentNumber">{{apidata.Assignment}}</span> 
     </div> 
     <div class="newAssignment"> 
      <span>{{ apidata.Operator == null ? 'New' : apidata.Operator }} 
      </span> 
     </div> 
    </div> 
</ng-container>