如何基于@Input()数组长度设置Angular Material Stepper的selectedIndex

这个问题我之前也碰到过，核心问题其实有两个：一是你设置的索引本身就越界了，二是没处理好@Input异步更新和步进器渲染的时机问题。我给你拆解一下解决方案：

首先，先修正索引的低级错误：你写的this.inputArray.length肯定会越界啊！因为数组索引是从0开始的，最后一个元素的索引应该是inputArray.length - 1，这是导致"out-of-bounds"错误的直接原因之一。

接下来，解决时机问题：因为@Input属性可能是父组件异步传递的（比如通过API请求后赋值），而ngAfterViewInit只执行一次，这时候你的inputArray可能还没拿到值，或者步进器的步骤还没根据数组渲染出来。所以不能只在ngAfterViewInit里设置，得监听inputArray的变化，同时确保步进器的步骤已经生成。

具体实现方案 #

方案一：用ngOnChanges监听输入变化

1. 先通过ViewChild获取步进器实例：

import { Component, Input, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';

@Component({
  // 你的组件元数据
})
export class YourStepperComponent implements OnChanges {
  @ViewChild(MatStepper) stepper: MatStepper;
  @Input() inputArray: any[];

  ngOnChanges(changes: SimpleChanges) {
    // 检查inputArray是否有有效值
    if (changes.inputArray && this.inputArray?.length > 0) {
      // 用setTimeout等待步进器步骤渲染完成（Angular变更检测循环后）
      setTimeout(() => {
        const lastIndex = this.inputArray.length - 1;
        // 额外做个边界检查，防止意外
        if (lastIndex >= 0 && lastIndex < this.stepper.steps.length) {
          this.stepper.selectedIndex = lastIndex;
        }
      });
    }
  }
}

方案二：用@Input的setter监听变化

如果觉得ngOnChanges不够灵活，也可以给inputArray加个setter：

import { Component, Input, ViewChild, AfterViewInit } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';

@Component({
  // 你的组件元数据
})
export class YourStepperComponent implements AfterViewInit {
  @ViewChild(MatStepper) stepper: MatStepper;
  private _inputArray: any[];

  @Input() set inputArray(value: any[]) {
    this._inputArray = value;
    this.updateStepperIndex();
  }

  get inputArray(): any[] {
    return this._inputArray;
  }

  ngAfterViewInit() {
    // 初始化时如果inputArray已有值，也更新一次索引
    this.updateStepperIndex();
  }

  private updateStepperIndex() {
    if (this.stepper && this._inputArray?.length > 0) {
      setTimeout(() => {
        const lastIndex = this._inputArray.length - 1;
        if (lastIndex < this.stepper.steps.length) {
          this.stepper.selectedIndex = lastIndex;
        }
      });
    }
  }
}

为什么要用setTimeout？ #

因为当inputArray变化时，Angular需要先执行变更检测，把基于inputArray生成的步进器步骤渲染到DOM里。setTimeout会把设置索引的逻辑放到下一个宏任务队列，确保此时步进器的steps已经生成完毕，不会出现步骤还没渲染就设置索引的情况。

另外，如果你确定inputArray不会是空数组，也可以去掉边界检查，但加上会更稳妥，避免意外报错。

内容的提问来源于stack exchange，提问作者gh0st