Angular 如何在mat progress微调器上反转进度

我使用微调器作为计时器，我想反转进度方向。从0到100是顺时针的，但我的百分比是从100（15分钟=900秒）到0（时间已经用完）

有两个问题：

1.-根据数值计算时间，单位为分秒

我喜欢使用日期对象和日期管道

get time()
  {
    return new Date(0,0,0,0,0,900-9*this.value) 
  }

{{time|date:'mm:ss'}}

2.-居中放置两个div，您可以使用，例如

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
  width: 100px;
  height: 100px;
}
.div2
{
  z-index:100;
  position:absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

还有你的.html

<div class="box">
  <mat-progress-spinner
        class="example-margin"
        color="primary"
        mode="determinate"
        [value]="value">
    </mat-progress-spinner>
  <div class="div2">{{time|date:'mm:ss'}}</div>
</div>

{{时间|日期：'mm:ss'}}

请参见有两个问题：

1.-根据数值计算时间，单位为分秒

我喜欢使用日期对象和日期管道

get time()
  {
    return new Date(0,0,0,0,0,900-9*this.value) 
  }

{{time|date:'mm:ss'}}

2.-居中放置两个div，您可以使用，例如

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
  width: 100px;
  height: 100px;
}
.div2
{
  z-index:100;
  position:absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

还有你的.html

<div class="box">
  <mat-progress-spinner
        class="example-margin"
        color="primary"
        mode="determinate"
        [value]="value">
    </mat-progress-spinner>
  <div class="div2">{{time|date:'mm:ss'}}</div>
</div>

{{时间|日期：'mm:ss'}}

---

请参见

您可以添加一个计算相对值的参数。在您的例子中，该值为（100秒/9）。您可以添加一个值来计算相对值。在您的情况下，值为（100秒/9）。感谢您的帮助。基于持续时间，我已经得到了100到0之间的百分比。问题是“倒计时”的方向，因为我的时间是从15:00到00:00（在stackblitz中是从00:00到15:00））使用then

get time（）{返回新日期（0,0,0,0,0,9*this.value）}

感谢您的帮助。基于持续时间，我已经得到了100到0之间的百分比。问题是“倒计时”的方向，因为我的时间是从15:00到00:00（在stackblitz中是从00:00到15:00））使用then

get time（）{返回新日期（0,0,0,0,0,9*this.value）}