Блог

У меня есть индикатор выполнения в моем приложении 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;
  

Если у вас нет информации о прогрессе службы, вы можете использовать неопределенный индикатор или подделать прогресс, бесконечно увеличивая значение до 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);
}