Angular 4 |在触发 *ngIf 时创建额外的 div

Question

美好的一天，我在这里做什么？我正在调用 API 数据，但是在我的 if 条件下，它似乎在验证为 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

使用 ng-container 而不是 div

In order to avoid having to create that extra div, we can instead use ng-container directive:

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

As we can see, the ng-container directive provides us with an element that we can attach a structural directive to a section of the page, without having to create an extra element just for that.

There is another major use case for the ng-container directive: it can also provide a placeholder for injecting a template dynamically into the page.

参考 - https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

Answer 2

您需要做的就是将 div 替换为 *ngFor 的 ng-container :

<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 3

无论您的条件是真还是假，由于循环

，您总会创建一个 div

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

试试这个

<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>

Angular 4 |在触发 *ngIf 时创建额外的 div

Angular 4 | creating extra div when *ngIf is triggered

angular-ng-if

ngfor

angular