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替换为ng-container *ngFor：

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

如果条件为divs，则不会创建额外的false。

<强> WORKING DEMO

Answer 2

使用ng-container代替div

为了避免必须创建额外的div，我们可以改为使用 ng-container指令：

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指令还有另一个主要用例：它可以   还提供了一个占位符，用于动态注入模板   页面。

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

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

3 个答案: