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

Question

我在数据库中有两个表，我正在通过 API 创建循环:

<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 个生产者名称和外键。我的例子笔记本电脑有 producerId = 3，我想为每个生产者循环并只显示满足条件的。它有效，但当我看到 DOM 时，它吓到我了。 70 格!我读过这个:*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 已经提到的，这是为绑定(bind)创建的占位符。这是正常的。

但我喜欢在转储 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>