Question

我的Angular应用程序中有一个进度条，我想做的是，当用户单击发布评论时，显示进度从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％，而不是逐步的进度，因为调用是在提交时进行的。

我什至没有尝试过有人建议的以下方法。

    this.commentProgress.progress = 10 - 20 - 30 - 40 - 50 - 100;

Answer 1

如果您没有关于服务进度的信息，则可以使用 indeterminate indicator，也可以通过将价值不断增加到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);
}

如何基于Angular中的API响应向进度栏增加价值

1 个答案: