Angular2 - * ngIf和* ngFor创建多个空元素

Question

我必须在db中使用表，并且从创建的apis我创建循环：

<div *ngFor="let laptop of laptops">
    some content
    <!-- Producer / Name -->
    <div *ngFor="let producer of producers">
         <div class="title" *ngIf="producer.id === laptop.producerId>
               {{producer.name}} {{laptop.model}}
         </div>

    </div>
</div>

我有70个生产者名称和从笔记本电脑到生产者表的外键。我的笔记本电脑有生产者ID = 3，我想为每个生产者循环，只显示满足条件。它有效，但当我看到DOM时，它让我感到害怕。 70个div！我读过这个：*ngIf and *ngFor on same element causing error

之后：

 <ng-container *ngFor="let producer of producers>
        <div class="title" *ngIf="producer.id === laptop.producerId>
             {{producer.name}} {{laptop.model}}
        </div>
</ng-container>

我有DOM：

这是正确的结果吗？或者有没有办法只创建符合条件的div？

Answer 1

正如@Gunter已经提到的，这是为绑定创建的占位符。这很正常。

但是我希望在转储HTML之前重新构建我的数据，所以在性能和可读性方面它看起来不错。

//once laptop and producers are retrieved from the server call below method
formatLaptopData(producers) {
    this.laptops = this.laptops.map((laptop: any)=> {
       laptop.producers = 
           producers.filter((producer: any) => laptop.producerId == producer.id);
       return laptop;
    });
}

<强> HTML

<div *ngFor="let laptop of laptops">
    some content
    <div *ngFor="let producer of laptop.producers">
         <div class="title">
              {{producer.name}} {{laptop.model}}
         </div>
    </div>
</div>

Answer 2

我发现*ngIf逻辑的响应与IF语句非常相似，这意味着：

使用*ngIf="producer.id != laptop.producerId"添加新的div时，您可以自定义然后添加div，例如，给它显示类：

HTML文件：

<div *ngFor="let producer of producers">
     <div class="title" *ngIf="producer.id === laptop.producerId">
           {{producer.name}} {{laptop.model}}
     </div>
     <div class="hidden" *ngIf="producer.id != laptop.producerId">
     </div>
</div>

CSS

.hidden {
   display: none
}

它仍然会稍微破坏CSS，而且我还没有弄清楚如何解决空div的CSS。