Angular 9/10动态Material进度条生成与独立控制问题

完全没问题，你的这两个需求在Angular里都能很优雅地实现，我直接给你拆解方案加代码示例：

1. 用*ngFor动态渲染进度条——非常合适！ #

Angular的*ngFor就是专门用来处理这种基于列表数据动态生成DOM元素的场景，完美匹配你的需求。你只需要先在组件类里定义一个包含每个进度条数据的数组，然后在模板里循环渲染Material进度条即可。

2. 基于ID单独修改进度值 #

给每个进度条的数据项添加唯一标识（比如id），之后通过这个标识找到对应的数组元素，修改它的进度值即可——Angular的变更检测会自动帮你更新视图。

完整代码示例 #

component.ts

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

// 定义进度条数据的类型，让代码更规范
interface ProgressItem {
  id: number;
  title: string;
  value: number;
}

@Component({
  selector: 'app-progress-demo',
  templateUrl: './progress-demo.component.html',
  styleUrls: ['./progress-demo.component.css']
})
export class ProgressDemoComponent {
  // 这里模拟你的动态数组，长度可以根据业务逻辑任意调整
  progressItems: ProgressItem[] = [
    { id: 1, title: '文件上传1', value: 30 },
    { id: 2, title: '文件上传2', value: 60 },
    { id: 3, title: '文件上传3', value: 10 }
  ];

  // 根据ID更新指定进度条的数值
  updateProgress(id: number, newProgress: number) {
    const targetItem = this.progressItems.find(item => item.id === id);
    if (targetItem) {
      // 确保进度值始终在0-100的合理范围内
      targetItem.value = Math.max(0, Math.min(100, newProgress));
    }
  }

  // 模拟一个随机更新进度的测试方法，方便你快速验证功能
  randomUpdate() {
    const randomId = Math.floor(Math.random() * this.progressItems.length) + 1;
    const randomValue = Math.floor(Math.random() * 100);
    this.updateProgress(randomId, randomValue);
  }
}

component.html

<!-- 循环渲染动态进度条 -->
<div *ngFor="let item of progressItems" class="progress-card">
  <h4>{{ item.title }}</h4>
  <p>当前进度: {{ item.value }}%</p>
  <mat-progress-bar mode="determinate" [value]="item.value"></mat-progress-bar>
  <!-- 单个进度条的更新按钮，点击后增加10%进度 -->
  <button (click)="updateProgress(item.id, item.value + 10)" class="btn">
    进度+10%
  </button>
</div>

<!-- 全局测试按钮，随机更新任意一个进度条 -->
<button (click)="randomUpdate()" class="global-btn">随机更新一个进度条</button>

关键说明

• 进度条的数量完全由progressItems数组的长度决定，数组新增/删除元素时，视图会自动同步更新
• updateProgress方法通过id精准定位目标进度条，修改数据后Angular会自动触发视图更新，不需要额外操作
• 如果你的业务是异步场景（比如文件上传实时更新进度），只需要在对应的回调逻辑里调用updateProgress方法，传入目标ID和最新进度值即可

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