Question

我正在开展一个角度4项目，我需要创建一个结构，其中有三个复选框。一旦选中了第一个复选框，就应该以不明显的方式创建一个选项卡，所以通过该逻辑，如果我选择所有这三个选项卡，那么将会有三个选项卡，我遇到的问题如下：我需要在任何gievn时间点，要选择一个选项卡，因此，如果选中第一个复选框，则应选择第一个选项卡，如果未选中第一个复选框，则应选择第二个选项卡。任何帮助都将受到高度赞赏。谢谢！

为了更好地理解，我创建了一个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)"。

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

1 个答案: