İlk sekme her zaman dinamik sekmelerden nasıl seçilir?

Question

Açısal bir 4 proje üzerinde çalışıyorum, üç onay kutusunun bulunduğu bir yapı oluşturmam gerekiyor. İlk onay kutusu seçildikten sonra bir sekme standart olarak oluşturulmalıdır, bu nedenle üçü seçtiğimde bu mantıkla üç sekme olacak, sorun şu şekilde sıkışmış olacak: Herhangi bir gievn noktasında ihtiyacım var, seçilecek bir sekme, bu yüzden ilk onay kutusu seçildiyse ilk sekmenin önceden seçilmiş olması gerekir, ilk onay kutusu seçili değilse, ikinci sekme seçilmelidir .. bu konuda yardım çok takdir edilecektir. Teşekkürler! https://plnkr.co/edit/2UPBf67y2ExmLaePP3VV?p=preview

html kodu:

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

Geçerli endeks 0'a eşit olup olmadığını kontrol etmek gerek

Answer 1

ardından set bir plunker örnek yaratmıştı daha iyi anlamak için

Onay kutusunun [checked] özelliği.

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

** GÜNCELLEME ** Bu yana

olacak, burada benim önerim gereksinimlere dayalı çalışmak değil:

• Yanlış olmazsam , industry bir api çağrısından geliyordu, bu yüzden bir söz verilecek. Bu kodu ngOnInit()'a koyun, böylece veriler gelene kadar html işlem görmeyecektir. Daha sonra sektörün ilk endeksini selectedIndustries'e koydu. Html'de, ilk divanıza [checked]="isIndustrySelected(industry.id)"'u eklersiniz.