Проблема с добавлением значка загрузки с TypeScript

Question

Привет, команда, у меня проблема, когда я пытаюсь добавить значок загрузки, и проблема в следующем. Когда я загружаю веб-сервис, значок отображается, но сразу же исчезает, и веб-сервис, который занимает около 6 секунд, показывает все данные .... вот мой код.

public loadData(): void {
        dataModel = new TimelineStructure();
        this.dataManager = new RoadmapDataManager(dataModel, this, this.underlyingModelService, this.commonService);
        // Visualization starts always first day of month.
        dataModel.originDate = moment(new Date()).format('YYYY-MM-DD');
        // dataModel.originDate = moment().format().valueOf();

        this.startLoading();
        const call: Promise<McDataResponse<Swimlane>> = this.underlyingModelService.getSwimlanes(this.journeyId).toPromise();
        call.then(data => {
            const swimlanes: any[] = (data.data as []);
            let countdown = swimlanes.length;
            let count = 0;
            swimlanes.forEach(swimlane => {
                const task: Task = TaskParser.parser(swimlane, count++);
                dataModel.tasks.push(task);
                dataModel.unfilteredTasks.push(task);
                this.setSwimlaneAssignee(task);
                this.underlyingModelService.getSwimlaneItems(swimlane.id).subscribe(
                    dataItem => {
                        const items: any[] = (dataItem.data as []);
                        items.forEach(i => {
                            const activity: Activity = this.activityParser.parser(i, swimlane.index);
                            if (i.label === 'Plan') {
                                this.underlyingModelService.countTasks(i.projectId).subscribe(
                                    response => {
                                        this.activityEmpty = response.data[0] === 0;
                                        activity.isEmpty = response.data[0] === 0;
                                        dataModel.activities.push(activity);
                                        dataModel.unfilteredActivities.push(activity);
                                        this.setPlanAssignee(activity);
                                        this.destroyAndReload();
                                    });
                            } else {
                                dataModel.activities.push(activity);
                                dataModel.unfilteredActivities.push(activity);
                            }
                        });

                        if (--countdown === 0) {
                            this.loadGanttChart(this.primaryPeriod, this.secondaryPeriod);
                            this.destroyAndReload();
                        }
                    });
            });
            this.createMarker();
        }).finally(() => {
            this.stopLoading();
        });
    }

функция, которая запускает значок загрузки, StartLoading - это образец логической переменной, которую я использую в моем html файле

Answer 1

Проблема в приведенном выше коде заключалась в том, что обещание было выполнено еще до завершения внутреннего API, на который вы подписывались. Собственно, менять код на обещанный нет необходимости. Ваш код должен выглядеть примерно так: -

public loadData(): void {
        dataModel = new TimelineStructure();
        this.dataManager = new RoadmapDataManager(dataModel, this, this.underlyingModelService, this.commonService);
        // Visualization starts always first day of month.
        dataModel.originDate = moment(new Date()).format('YYYY-MM-DD');
        // dataModel.originDate = moment().format().valueOf();

        this.startLoading();
        const call: Observable<McDataResponse<Swimlane>> = this.underlyingModelService.getSwimlanes(this.journeyId);
        call.pipe(mergeMap(data => {
            const swimlanes: any[] = (data.data as []);
            let countdown = swimlanes.length;
            let count = 0;
            const swimLaneCalls = swimlanes.map((swimlane)=>this.underlyingModelService.getSwinlaneItems(swinlane.id).pipe(mergeMap(dataItem => {
                        const items: any[] = (dataItem.data as []);
                        const myCalls = [];
                        items.forEach(i => {
                            const activity: Activity = this.activityParser.parser(i, swimlane.index);
                            if (i.label === 'Plan') {
                                myCalls.push(this.underlyingModelService.countTasks(i.projectId).pipe(map(
                                    response => {
                                        this.activityEmpty = response.data[0] === 0;
                                        activity.isEmpty = response.data[0] === 0;
                                        dataModel.activities.push(activity);
                                        dataModel.unfilteredActivities.push(activity);
                                        this.setPlanAssignee(activity);
                                        this.destroyAndReload();
                                    })));
                            } else {
                                dataModel.activities.push(activity);
                                dataModel.unfilteredActivities.push(activity);
                            }
                        });
                        return forkJoin(mycalls).pipe(map(()=> {
                if (--countdown === 0) {
                                    this.loadGanttChart(this.primaryPeriod, this.secondaryPeriod);
                                    this.destroyAndReload();
                            }
                        });
                      })));
            swimlanes.forEach(swimlane => {
                const task: Task = TaskParser.parser(swimlane, count++);
                dataModel.tasks.push(task);
                dataModel.unfilteredTasks.push(task);
                this.setSwimlaneAssignee(task);
            });
            return forkJoin(swimLaneCalls).pipe(map(res=> {
                 this.createMarker();
            });
        })).subscribe(() => {
            this.stopLoading();
        });
    }