如何從動態標籤中預先選擇第一個標籤？

Question

我正在一個角度4項目，我需要創建一個結構，其中有三個複選框。一旦第一個複選框被選中，一個選項卡應該被偶然地創建，所以通過這個邏輯，如果我選擇它們全部三個，那麼將會有三個選項卡，這個問題我被困在它如下：我需要在任何時間點，一個選項卡被選中，所以可以說，如果第一個複選框被選中，那麼應該預先選擇第一個選項卡，如果第一個複選框未被選中，那麼第二個選項卡應該被選中..任何幫助這個方面將非常感激。謝謝！

爲了更好地理解我創造了一個plunker例如： https://plnkr.co/edit/2UPBf67y2ExmLaePP3VV?p=preview

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

您需要檢查當前指數等於0，則設置[checked]複選框的屬性。

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

**更新**

，因爲這將不根據您的要求工作，這是我的建議：

• 如果我沒有錯，industry將來自api調用，所以它會返回一個承諾。將此代碼放在ngOnInit()上，以便在數據到達之前html不會呈現。然後把行業的第一個索引放到選定的行業。在html上，您只需在您的第一個div上添加[checked]="isIndustrySelected(industry.id)"。