I am currently working with two tables in my database, and using APIs to create 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 a total of 70 producer names and a foreign key linking laptops to the producer table. For example, if my laptop has a producerId value of 3, I want to loop through each producer and only display those that meet the condition. The current implementation is functional, but the resulting DOM structure with 70 divs is concerning. I came across this SO post: *ngIf and *ngFor on same element causing error
In response to the above issue, I adjusted my code as follows:
<ng-container *ngFor="let producer of producers>
<div class="title" *ngIf="producer.id === laptop.producerId>
{{producer.name}} {{laptop.model}}
</div>
</ng-container>
The resulting DOM now looks like this:
https://i.sstatic.net/nCgnw.png
Is this the correct approach? Or is there a more efficient way to only create the necessary div elements based on the condition? https://i.sstatic.net/KN4MO.png