如何在Angular中基于API响应向进度条添加值

我的Angular应用程序中有一个进度条，我想做的是，当用户单击post comment时，显示从0到100（完成时）的进度。到目前为止，我不认为我实现的是这样的，到目前为止，代码是：

ts.file

 public commentProgress = {
    progress: 0
  };

onSubmit() {
    if (this.addCommentsForm.invalid) {
      this.addCommentsForm.setErrors({ ...this.addCommentsForm.errors, 'required': true });
      return;
    }
    let putData = Object.assign({}, this.addCommentsForm.value);
    console.log('form, ', putData)
    this.uploading = true;
    this.commentProgress.progress = 100;
    this.service.putServiceComments(putData, this.s_id).subscribe((response: any) => {
      console.log("comment sent");//On success response
      this.getServiceComments();
      this.uploading = false;
      this.commentProgress.progress = 0;
      this.addCommentsForm.get('comment').reset();
    }, (errorResponse: any) => {
      console.log(errorResponse); //On unsuccessful response
      this.error = true;
      this.uploading = false;
    });
  }
}

html:

 <progress *ngIf="uploading" class="progress comment-progress" [value]="commentProgress.progress" max="100"></progress>

---

若你们并没有关于服务进度的信息，你们可以使用，或者你们可以通过让价值无限增长到100来伪造进度。我实现了这个功能来实现它：

public commentProgress = {
  progress: 0
};
private addition = 100;
private loading = true;

private addAddition() {
  setTimeout(() => {
    this.commentProgress.progress += this.addition / 2;
    this.addition /= 2;
    if (this.loading) {
      this.addAddition();
    } else {
      this.commentProgress.progress = 0;
    }
  }, 1000);
}

---

您应该通过服务putServiceComments方法报告进度：

reportProgress:true，//观察：'events'

从Angular HTTP检查此示例：可以详细说明一下，是否需要在服务文件本身或在上述提交功能中，从您的服务方法报告进度，因此它应该在服务文件中。检查上例中的

uploader.service.ts

，看看它是如何处理的。是否需要在Submit函数中执行此操作？或者ngOnit？代码示例不是基于角度材质，您应该在ngOnInit中包含它，但当您将上载设置为true时，必须将加法设置为100。上传的默认状态为false。只需将addAddition放在ngOnInit中，并在html中添加{{commentProgress.progress}}即可看到神奇之处

public commentProgress = {
  progress: 0
};
private addition = 100;
private loading = true;

private addAddition() {
  setTimeout(() => {
    this.commentProgress.progress += this.addition / 2;
    this.addition /= 2;
    if (this.loading) {
      this.addAddition();
    } else {
      this.commentProgress.progress = 0;
    }
  }, 1000);
}