如何始终从动态选项卡中预先选择第一个选项卡？

Question

I am working on an angular 4 project, I need to create a structure in which there are three checkboxes. A tab should be dunamically created once the first checkbox is selected, so by that logic if I select all three of them then there will be three tabs, the problem I am stuck at it as follows:I need at any gievn point of time, one tab to be selected, so lets say if first checkbox is selected then first tab should be preselected, if first checkbox is unselected then second tab should be selected..any help this regard will be highly appreciated. Thanks!

For better understanding I had created a plunker example: https://plnkr.co/edit/2UPBf67y2ExmLaePP3VV?p=preview

Html code:

<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

You need to check if the current index is equal to 0, then set the [checked] property of the checkbox.

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

** UPDATE **

Since this will not work based on your requirements, here is my suggestion:

• If I'm not wrong, industry would come from an api call so it will return a promise. Put this code on ngOnInit() so the html will not render until the data arrived. Then on put the first index of industry to selectedIndustries. On html, you just add [checked]="isIndustrySelected(industry.id)" on your first div.