如何用*ngFor生成20个随机颜色的重复按钮？

不需要修改现有对象的结构（每个对象仍保持cases属性），只需重新生成statusCases数组，让它包含20个随机选择颜色类的条目即可。具体实现如下：

修改后的TS代码 #

export class AvgProvisioningTimeComponent implements OnInit {
  @Output() updateTestStatuses = new EventEmitter<string>();
  statusCases: { cases: string }[];
  // 提取所有可选的颜色类组合，方便随机选取
  private readonly colorOptions = [
    "status__button status__button--red",
    "status__button status__button--yellow",
    "status__button status__button--green"
  ];

  constructor() {
    this.statusCases = [];
  }
  
  ngOnInit(): void {
    // 初始化时生成20个随机颜色的按钮条目
    this.generateRandomButtons(20);
  }

  // 生成指定数量的随机按钮条目
  private generateRandomButtons(count: number): void {
    this.statusCases = Array.from({ length: count }, () => ({
      cases: this.colorOptions[Math.floor(Math.random() * this.colorOptions.length)]
    }));
  }

  updateTestStatus(status: string): void {
    this.updateTestStatuses.emit(status);
  }
}

HTML代码调整（可选优化） #

原有HTML代码可以直接复用，不过建议使用Angular标准的属性绑定语法设置类，更符合框架规范：

<button
  *ngFor="let case of statusCases; let i = index"
  [class]="case.cases"
>
</button>

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