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

【问题标题】：Angular2 - *ngIf and *ngFor create multiple empty elementsAngular2 - *ngIf 和 *ngFor 创建多个空元素
【发布时间】：2018-08-17 06:40:18
【问题描述】：

我在 db 中有两个表，我正在通过 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？

【问题讨论】：

这些 cmets 被 Angular 用作锚点或类似的绑定。你无法摆脱它们。
那是正确的结果？这些 cmets 不会减慢我的应用程序的速度吗？我在我的应用中的许多其他地方都使用过它们
如果项目不匹配，您可以使用过滤管道而不是*ngIf 来避免*ngFor 尝试首先呈现它。我不知道这对性能有多大影响。您需要自己进行性能检查。
你考虑过这个吗？stackoverflow.com/questions/37067138/…

标签： angular typescript

【解决方案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>

【讨论】：

TS2339：“从不”类型上不存在属性“id”。
@FreeStyle09 使其类型安全，问题将解决，否则使用any 变量为producer
是的，我添加了任何类型，但它不起作用：/我为你编辑代码你可以检查我是否遗漏了什么？
看看我所有的 .ts 代码，我认为我有相同的，但它不起作用：/
我错过了什么吗？

【解决方案2】：

重写整个答案，实际上我最终找到了解决方案。您只需将;else null 添加到ngIf*

<div *ngFor="let producer of producers">
     <div class="title" *ngIf="producer.id === 'laptop.producerId'; else null">
           {{producer.name}} {{laptop.model}}
     </div>
</div>

【讨论】：

这不能回答问题。此外，您可以使用<div [hidden]="producer.id !== laptop.producerId"></div>，而不是使用*ngIf 作为第二个div。 hidden 属性是内置的，元素将留在 DOM 中。如果值为 false，则使用 *ngIf 将从 DOM 中删除该元素。
我实际上缩短了它，你可以从我上次的编辑中看到它解决了“; else null”的问题，如果 id 不匹配，它不会生成 div。