使用* ngFor渲染Angular html标签

Question

I wanted to know if there is a way to use ngFor for rendering components, like in the codes in this link

summarizing, I wanted to do something like this

<div *ngFor="let item of tabs" class="tab-content" id="myTabContent">
  <div
    class="tab-pane fade show active"
    [id]="item.tab"
    role="tabpanel"
    aria-labelledby="{{ item.tab }}-tab"
  >
    <app-{{item.tab}}></app-{{item.tab}}>
  </div>
</div>

assuming I have the components created and the tabs variable as such:

 tabs = [
        { title: "Impresoras", tab: "printers" },
        { title: "Mapa de Ataques", tab: "attacks" },
        { title: "Alerta de Vuelos", tab: "flights" }
    ];

Answer 1

Assuming (based on your code sample) that you have custom components for each tab (eg <app-printers> , <app-attacks> , <app-flights> ), you could use an *ngSwitch structural directive to accomplish your goal:

 <div *ngFor="let item of tabs" class="tab-content" id="myTabContent" [ngSwitch]="item.tab"> <div class="tab-pane fade show active" [id]="item.tab" role="tabpanel" aria-labelledby="{{ item.tab }}-tab" > <app-printers *ngSwitchCase="printers"></app-printers> <app-attacks *ngSwitchCase="attacks"></app-attacks> <app-flights *ngSwitchCase="flights"></app-flights> </div> </div> 

Certainly, you could also do this using *ngIf :

 <div *ngFor="let item of tabs" class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" [id]="item.tab" role="tabpanel" aria-labelledby="{{ item.tab }}-tab" > <app-printers *ngIf="item.tab === 'printers'"></app-printers> <app-attacks *ngIf=item.tab === 'attacks'"></app-attacks> <app-flights *ngIf="item.tab === 'flights'"></app-flights> </div> </div> 

Hope that helps!

Answer 2

The ngFor statment is correct but the problem here is the tag,

<app-{{item.tab}}></app-{{item.tab}}>

app item tap could be a generic component with an Input decorator like:

<app-generic-tap [itemTap]="item.tap"><app-generic-tap>

Take a look to the Angular documentation especially in the @Input and @Output Decorators.