Связывание индикатора выполнения углового материала с наблюдаемым значением - PullRequest
Новая
       10

Связывание индикатора выполнения углового материала с наблюдаемым значением

0 голосов
/ 06 декабря 2018

Я пытаюсь связать индикатор выполнения с событием HTTP POST.Так что я могу показать прогресс загрузки для моего пользователя.В настоящее время у меня есть это: 

@Component({
  selector: 'app-upload-progress-snackbar',
  template: `<mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>`,
  styles: [],
})
export class UploadProgressComponent implements OnInit {
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data) { }

  public UploadObservable;

  public progress = 0;
  ngOnInit() {
    this.UploadObservable = this.data.uploadProgress;

    this.UploadObservable.subscribe((event) => {
      // Don't change value after finished upload
      if (event.loaded !== undefined) {
        // Convert progress to percentage and integer
        this.progress = Math.trunc(event.loaded / (event.total || event.loaded) * 100);

        this.progress.valueOf();
      }
      // Log upload progress
      console.log(this.progress);
    });
  }
}

Я не совсем уверен, имеет ли это какое-то отношение к области или что-то еще.

1 Ответ

0 голосов
/ 06 декабря 2018

Вы должны использовать асинхронный канал для прямой подписки внутри компонента: 

@Component({
  selector: 'app-upload-progress-snackbar',
  template: `<mat-progress-bar mode="determinate" [value]="progress | async"></mat-progress-bar>`,
  styles: [],
})
export class UploadProgressComponent implements OnInit {
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data) { }

  public progress = this.data.uploadProgress.pipe(
    map(({ loaded, total }) => loaded ? Math.round(loaded / (total || loaded) * 100) : 0)
  );
}
...