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

Question

我正在做一个 angular 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)"。