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

您需要做的就是将 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，则不会创建额外的 div。

<强> WORKING DEMO