0

我正在做一个 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>

4

1 回答 1

2

您需要检查当前索引是否等于 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[checked]="isIndustrySelected(industry.id)"上，您只需添加您的第一个 div。
于 2017-10-17T10:50:08.030 回答