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

Question

I have two tables in db, and from the apis, i'm creating loops:

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

I have 70 producer names and foreign key from laptops to producer table. My eg laptop has got producerId = 3 and i want to loop for each producers and display only this which meets the condition. It works but when i see DOM, it scares me. 70 divs! I've read this: *ngIf and *ngFor on same element causing error

and after this:

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

I have in DOM:

Is that correct result? Or is there any way to create only that div which meets the condition?

Answer 1

As @Gunter already mentioned, this are the placeholder created for binding. This is normal.

But I'd love to restructured my data before dumping the HTML, so in terms of performance and readability it will look nice.

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

We can achieve it by creating a filter. Create a file FilterPipe.ts with below codes.

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
public transform(value, keys: string, term: any) {
 if (!term) return value;
  return (value || []).filter(item => keys.split(',').some(key => 
  item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));
 }
}

Now the code will be like this

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

*Don't forget to import filter into the module.

Answer 3

Rewriting the whole answer, I actually found out the solution for it eventually. you just need to add ;else null to the ngIf*

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