Comment pré-sélectionner le premier onglet toujours à partir des onglets dynamiques?

Question

Je travaille sur un projet angulaire 4, j'ai besoin de créer une structure dans laquelle il y a trois cases à cocher. Un onglet devrait être créé de façon dynamique une fois la première case cochée, donc par cette logique si je sélectionne les trois, alors il y aura trois onglets, le problème est que je suis coincé comme suit: J'ai besoin à tout moment, un onglet à sélectionner, donc disons que si la première case est cochée, alors le premier onglet devrait être présélectionné, si la première case n'est pas cochée alors le deuxième onglet devrait être sélectionné .. toute aide sera grandement appréciée. Merci!

Pour une meilleure compréhension, j'avais créé un exemple plunker: https://plnkr.co/edit/2UPBf67y2ExmLaePP3VV?p=preview

Code Html:

<div *ngFor="let industry of industries"> 
    <input type="checkbox" (change)="onIndustryChange($event.target.checked, industry.id)"> 
    <span>{{industry?.name}}</span> 
</div> 
<div class="tab-wrapper"> 
    <ul class="nav nav-tabs app-tab-menu"> 
    <ng-container *ngFor="let industry of industries"> 
     <li *ngIf="isIndustrySelected(industry.id)"> 
      <a href="#industry_{{industry.id}}" data-toggle="tab">{{industry?.name}}</a> 
     </li> 
    </ng-container> 
    </ul> 
<div class="tab-content"> 
    <ng-container *ngFor="let industry of industries"> 
    <div class="tab-pane" id="industry_{{industry.id}}" *ngIf="isIndustrySelected(industry.id)"> 
     <span>{{industry.name}}</span> 
    </div> 
    </ng-container> 
</div> 

Answer 1

Vous devez vérifier si l'indice actuel est égal à 0, puis réglez la [checked] propriété de la case à cocher.

<div *ngFor="let industry of industries; let i = index">  
    <input type="checkbox" [checked]="i ==0" (change)="onIndustryChange($event.target.checked, industry.id)"> 
    <span>{{industry?.name}}</span> 

<ul class="nav nav-tabs app-tab-menu"> 
    <ng-container *ngFor="let industry of industries; let i = index"> 
    <li *ngIf="isIndustrySelected(industry.id) || i == 0"> 
     <a href="#industry_{{industry.id}}" data-toggle="tab">{{industry?.name}}</a> 
    </li> 
    </ng-container> 
</ul> 

** Mise à jour **

Depuis cela ne fonctionnera pas en fonction de vos besoins, voici ma suggestion:

• Si je ne me trompe pas , industry viendrait d'un appel API, donc il retournera une promesse. Mettez ce code sur ngOnInit() afin que le code HTML ne rende pas jusqu'à l'arrivée des données. Ensuite, mettre le premier indice de l'industrie à selectedIndustries. Sur html, vous venez d'ajouter [checked]="isIndustrySelected(industry.id)" sur votre premier div.