如何在动态创建的Angular Material步进器组件中修改状态图标？

我看了你的代码，核心问题出在**state="stepicons.text"**这个绑定上——你现在是把state硬编码成了字符串"stepicons.text"，而不是动态引用数组里的对应图标值。咱们一步步来调整：

1. 组件类里定义图标映射数据 #

首先在你的组件.ts文件里，确保有一个对应每个步骤的图标key集合，比如：

import { Component, OnInit } from '@angular/core';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourStepperComponent implements OnInit {
  // 步骤标题数据
  steps = [
    { title: '第一步' },
    { title: '第二步' },
    { title: '第三步' },
    { title: '第四步' }
  ];
  selectedStepIndex = 0;
  // 每个步骤对应的图标key，要和模板里的matStepperIcon名称一一对应
  stepIcons = ['edit', 'category', 'apps', 'search'];

  ngOnInit(): void {
    // 在这里可以动态修改图标，比如根据条件替换某一步的图标
    // 示例：this.stepIcons[1] = 'home';
  }

  selectionChanged(event: any) {
    this.selectedStepIndex = event.selectedIndex;
  }
}

2. 修改模板里的state动态绑定 #

把<mat-step>里的state="stepicons.text"改成根据循环索引动态获取图标key：

<mat-vertical-stepper (selectionChange)="selectionChanged($event)" [linear]="true" style="width:100%;height:100%">
  <!-- 图标模板保持不变，确保每个matStepperIcon的名称和stepIcons里的key对应 -->
  <ng-template matStepperIcon="edit">
    <mat-icon>done</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="category">
    <mat-icon>category</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="apps">
    <mat-icon>apps</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="search">
    <mat-icon>search</mat-icon>
  </ng-template>

  <!-- 动态绑定state到对应索引的图标key -->
  <mat-step *ngFor="let step of steps; let i = index" [label]="step.title" [state]="stepIcons[i]">
    <router-outlet *ngIf="i === selectedStepIndex"></router-outlet>
    <button mat-raised-button color="primary" matStepperNext style="margin-top:10px; float: left;position: relative;">Επόμενο</button>
  </mat-step>
</mat-vertical-stepper>

3. 可选优化：整合图标信息到steps数组 #

如果想让代码更直观，也可以把图标key直接嵌入每个step对象中：

// 组件类里的steps数组修改为
steps = [
  { title: '第一步', icon: 'edit' },
  { title: '第二步', icon: 'category' },
  { title: '第三步', icon: 'apps' },
  { title: '第四步', icon: 'search' }
];

然后模板里的state绑定简化为：

<mat-step *ngFor="let step of steps; let i = index" [label]="step.title" [state]="step.icon">

这样修改后，每个步骤就会自动匹配对应的<ng-template matStepperIcon>模板，把默认数字替换成Material图标。如果需要在ngOnInit里动态调整图标，直接修改stepIcons数组或者steps对象里的icon属性即可。

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