angular - * ngFor之外的访问索引，以 Angular 表示

我有这样的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>

结果是4之1，4之2 .....

这可能吗？

<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>

最佳答案

<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>