Модальное загрузочное окно Angular ngx с задержкой открытия

Я пытаюсь создать диалоговое окно индикатора выполнения с помощью ngx bootstrap, используя его модальные окна. В настоящее время у меня есть следующее:

generateDownload(distance: DistanceSplit) {
    this.dialogWait = this.dialogs.wait('Wait');

    list.forEach((distance, index) => {
        // ...
        this.dialogWait.setProgress(i);
        // ...
    });

    return tabledata;
}

В DialogsService:

public wait(title: string, message: string, percentage: number, settings?: any): BsModalRef {
    // ...
    return this.modalService.show(
        DialogsComponent, 
        Object.assign({}, this.options, settings)
    );
}

Проблема в том, что диалоговое окно отображается только после завершения цикла list.forEach. Как показать диалог ДО того, как список будет выполнен? У кого-нибудь есть похожая проблема и какой-нибудь рабочий код?


angular ngx-bootstrap ngx-bootstrap-modal
person Lars    schedule 20.08.2020    source источник
comment
Как насчет размещения логики list.forEach внутри DialogsComponent?   -  person huan feng    schedule 20.08.2020
comment
@huanfeng, конечно, это возможно, но я пытаюсь предотвратить это. Я хотел бы сохранить функциональность за пределами DialogsComponent   -  person Lars    schedule 20.08.2020

Ответы (1)


arrow_upward
0
arrow_downward

modalService.show должен быть методом синхронизации.

Вы отлаживаете последовательность с помощью console.log:

generateDownload(distance: DistanceSplit) {

    this.dialogWait = this.dialogs.wait('Wait');

    //Adding breakpoint here
    console.log('generateDownload');

    list.forEach((distance, index) => {
    ...

    this.dialogWait.setProgress(i);
    ...
    });

    return tabledata;
}
person huan feng    schedule 20.08.2020
comment
о да я сделал. Порядок обработки правильный, но диалоговое окно появляется слишком поздно (после завершения forEach) - person Lars; 20.08.2020
comment
Попробуйте добавить точку останова в console.log, вы увидите, что forEach не был выполнен и отображается модальное окно. Вы можете просто проверить это на stackblitz. - person huan feng; 20.08.2020
comment
Я должен исправить свой ответ: порядок обработки неверен. Цикл forEach обрабатывается, и когда это завершено, диалоговое окно обрабатывается (я использовал BsModalService onShown для проверки). Но теперь вопрос: как сделать так, чтобы сначала диалог обрабатывался? - person Lars; 20.08.2020
comment
Диалог должен отображаться перед forEach, а метод onInit компонента DialogsComponent должен выполняться перед forEach. Кстати, не уверен, что ваш вопрос setProgress всегда получает последнее значение? Если да, setProgress должен быть асинхронным методом? - person huan feng; 20.08.2020
comment
Я не мог решить свою проблему сам. Кажется, это не имеет отношения к модальному диалогу, а к стратегии обновления Angular, которую я не совсем понимаю. Я создал здесь новый пост с более подробным, но более общим описанием stackoverflow.com/questions/63502641/ - person Lars; 20.08.2020