如何从动态标签中预先选择第一个标签？

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)"。