角度，进度条-异步启动/停止

Question

bounty到期在7天内。这个问题的答案有资格获得+ 50声望赏金。DrMartin正在寻找规范答案。

我在进度栏中遇到问题。我正在使用ng-bootstrap模块。

我在下拉菜单中有多个选项，我想要以下行为：-我可以从下拉菜单中分别启动/停止每个选项的进度条，-当我将选项更改为另一个选项并返回时->计数将在后台进行。

以下解决方案运行良好。但是，就像在IT中一样，某事已更改，但我没有看到该错误。

服务文件：

@Injectable()
export class TimerService {

    constructor(private httpClient: HttpClient) {
    }

    private timer = [];
    private timerStarted: boolean [] = [false];
    private stopTimer$: Subject<any> [] = [];


    startTimer(duration: number, indexDropdown: number) {
        this.stopTimer$[indexDropdown] = new Subject();
        this.timerStarted[indexDropdown] = false;
        this.timer[indexDropdown] = interval(duration).pipe(take(1000), takeUntil(this.stopTimer$[indexDropdown]), share());
        this.timer[indexDropdown].pipe(
            tap(() => this.timerStarted[indexDropdown] = true),
            finalize(() => this.timerStarted[indexDropdown] = false)
        ).subscribe();
    }

    getTimer(indexDropdown: number) {
        return this.timer[indexDropdown];
    }

    getTimerStarted(indexDropdown: number) {
        return this.timerStarted[indexDropdown];
    }

    stopTimer(indexDropdown: number) {
        this.stopTimer$[indexDropdown].next();
    }
}

和组件文件：

export class TimerComponent implements OnInit, OnDestroy, OnChanges {

    @Input() optionDropdownArray: string[];

    isLoading: boolean;
    progress: number [] = [0];

    private destroy$: Subject<boolean>[] = [];
    private loadingIndexSub: Subscription;
    selectedIndex = 0;



    timerObserver$ = [];


    constructor(
        private timerService: timerService,
        private timerStore$: Store<TimerStatus>,
        private indexService: TimerService,
        private config: NgbProgressbarConfig) {
          config.max = 1000;
          config.striped = false;
          config.animated = false;
          config.type = 'success';
          config.height = '3.5em';
    }

    ngOnChanges(): void {
        this.loadingIndexSub = this.indexService.gettingIndexSelected.subscribe(getIndex => {
            this.selectedIndex = getIndex;
            this.isLoading = false;
            this.checkProgressSubscriptions();
            if (this.timerService.getTimerStarted(getIndex)) {
                this.destroy$[this.selectedIndex] = new Subject<false>();
                this.progress[getIndex] = this.timerService.getTimer(getIndex).pipe(take(1)).subscribe();
                this.checkProgressSubscriptions();
                this.subscribeToStartedTimer(getIndex);
                this.isLoading = true;
            }
        });
    }

    ngOnInit() {
        this.loadingIndexSub = this.indexService.gettingIndexSelected.subscribe(getIndex => {
            this.selectedIndex = getIndex;
        });

    }

    private startProcessing() {
        this.destroy$[this.selectedIndex] = new Subject<boolean>();
        this.isLoading = true;
        this.progress[this.selectedIndex] = 0;
        this.timerStore$
            .select(selectDurationActiveWorkStep, {timerSelectorProps: this.selectedIndex}).subscribe(timeArray => {
            this.timerService.startTimer(timeArray.activeTaskDuration, this.selectedIndex);
            this.subscribeToStartedTimer(this.selectedIndex);
        });
    }

    private stopProcessing() {
        this.isLoading = false;
        if (this.destroy$[this.selectedIndex] != undefined) {
            this.destroy$[this.selectedIndex].next(true);
        }
        this.timerService.stopTimer(this.selectedIndex);
    }


    private subscribeToStartedTimer(dropdownIndexId: number) {
        this.timerObserver$[dropdownIndexId] = this.timerService.getTimer(dropdownIndexId).pipe(
            takeUntil(this.destroy$[dropdownIndexId])
        ).subscribe((val => {
            this.progress[dropdownIndexId] = val + 1;
        }));
    }

    private checkProgressSubscriptions() {
        for (let i = 0; i < this.optionDropdownArray.length; i++) {
            if (this.timerObserver$[i]) {
                this.timerObserver$[i].unsubscribe();
            }
        }
    }

    ngOnDestroy() {
        if (this.destroy$[this.selectedIndex] != undefined) {
            this.destroy$[this.selectedIndex].next(true);
        }
    }

}

Answer 1

可能您的持续时间不正确。请检查一下。 F.e.请写1000而不是timeArray.activeTaskDuration。