以角度访问 *ngFor 之外的索引答案

【问题标题】：access index outside *ngFor in angular以角度访问 *ngFor 之外的索引
【发布时间】：2017-10-23 16:45:53
【问题描述】：

我有一个这样的 div

<div *ngFor='let step of steps; let i =index'>

在 ngFor 之外的某个地方我有这个

<span>Step 1 of {{steps.length}}</span>

我需要跟踪 ngFor 之外的索引，这样才能正常工作

<span>Step {{i+1}} of {{steps.length}}</span>

结果是 1 of 4, 2 of 4.....

这可能吗？

<header>
      <h1>form</h1>
      <div>
        <span>Step {{i+1}} of {{steps.length}}</span> // here is where I need the step index
        <button (click)="previous()"
           [disabled]="!hasPrevStep || activeStep.showPrev">Back</button>
        <button (click)="next()" [disabled]="!activeStep.isValid"
           [hidden]="!hasNextStep || activeStep.showNext">Next</button>
      </div>
    </header>
    <nav>
      <ul>
// here is where im looping over
        <li *ngFor="let step of steps; let i = index"
            (click)="goToStep(step)">
          <span class="u-flex1">
            <span>
            <a class="button>{{step.title}}</a>        
           </span>
          </span>
        </li>
      </ul>
    </nav>

【问题讨论】：

i 在*ngFor 之外应该有什么值？我无法从问题中的代码中理解您的要求。
你为什么没有selectedIndex之类的东西？
我有 4 个步骤，我想显示哪个步骤处于活动状态 1 of 4, 2 of 4 .....

标签： angular

【解决方案1】：

<div *ngFor='let step of steps; let i =index'>
  <button (click)="active = i" [enabled]="active !== i">make active</button>
</div>

<span>Step {{active+1}} of {{steps.length}}</span>

【讨论】：

【解决方案2】：

你可以将你的 ngFor 循环包裹起来，只在第一个页面之前显示当前页面。 https://angular.io/docs/ts/latest/guide/structural-directives.html#!#ng-container

<ng-container *ngFor='let step of steps; let i =index'>
  <span *ngIf='step.isActive'>Step {{i+1}} of {{steps.length}}</span>
  <div>Step content</div>
</ng-container>

您似乎没有对用例考虑太多，或者您没有在问题中发布所有详细信息。如果您只想显示一个步骤，它没有任何线索，循环所有步骤，但您可以看到 ng-container 是如何工作的。它正在重复内容，但没有定义 *ngFor 的标签

【讨论】：