Angular 角度：如何做进度条检查表

我想做进度条清单，比如Trello，但我不知道怎么做，我不知道如何开始。 特雷罗的例子

HTML

---

也许是这样的

Ts

Html

您可以简单地“计数”选中的：

100*this.depositTasks.filter（x=>x.checked.length/this.deposit.Task.length

，甚至您也可以在.html:

中写入html的哪一行？您可以将它放在代码段的最顶端。在包含ngFor的封闭div上方。

<div *ngFor="let task of depositTasks; let i = index">
                            <div>
                              <div *ngIf="taskIdx!==i">
                                <input type="checkbox" [(ngModel)]="task.checked(change)="changeChecked()"
                                  [ngModelOptions]="{standalone: true}">
                                {{task?.subjectTask}}
                                {{getDev(task)}}
                                {{task?.point}}
                                {{task?.dueDate | date: 'dd/MM/yyyy'}}
                                {{task?.checked}}
                             </div>
                          </div>
</div>

  progressbar() {
   
  }

progress: Object;

progressbar() {
    const total = this.depositTasks.length;
    const completed = this.depositTasks.
        .reduce((done, task) => done += Number(task.checked), 0);
    this.progress = {width: (completed/total) + ’%’};
}

<div style=“width: 500px; height:20px;background:white;border-radius:8px;”>
    <div [ngStyle]=“progress” style=“background:blue”></div>
</div>