使用Angular前进到下一个级别栏

Question

我一直在开发一个小型游戏，我试图使用Angular框架（带有TypeScript）对公式进行哈希运算，以显示“当前到下一级别的进度”。

我现在有三个变量来处理totalExp，level和expToNextLevel。

接下来，我有一个train()函数，看起来像这样：

train() {
    this.totalExp+= 20;
    if (this.totalExp>= this.expToNextLevel) {
        this.levelUp();
}

..然后计算下一级别所需EXP的函数（有些人可能会意识到这一点）：

levelUp() {
    this.expToNextLevel += 500 * (this.level ^ 2) + (500 * this.level);
  }

在我的HTML中，有一个进度条，用于显示进度到下一级：

<label>EXP</label>
<progress value="{{ totalExp }}" max="{{ expToNextLevel }}" ></progress>

我的问题是，在达到下一个级别时，找不到将进度重置为0％的正确效果。我的想法是按照从totalExp中减去expToNextLevel的方式进行的..但是我找不到正确的顺序，否则这只是一种不好的方法。

我从1级开始，下一级需要100exp。达到级别2时，我有totalExp = 100和expToNextLevel = 2100。发生这种情况时，每次尝试都会在进度栏中显示大于0的值。

我应该采取什么方法？