Почему мой стиль css через javascript не применяется на экране рабочего стола?

Question

У меня есть приложение angular7, в котором я использую ngx-dialogs. Я использую этот модальный для подтверждения модальный для удаления цели. Я открываю модальное окно, чтобы предложить пользователю «вы хотите обязательно удалить», если пользователь нажимает «Да», чтобы элемент был удален, и модальное окно должно быть закрыто. У меня есть эта реализация в моем component.ts

import { Ngxalert } from 'ngx-dialogs';

// after class intialization
confirmAlert: any = new Ngxalert;

        delete = (rowData: Users) => {
    if (rowData) {
        this.confirmAlert.create({
            title: 'Delete Warning',
            message: 'Are you sure, you want to delete item?',
            confirm: () => {
                this._dataService.delete(this._constant.user + '/' + rowData._id)
                    .subscribe(res => {
                        console.log('delete response : ',res);
                        console.log('html element',(<HTMLElement>document.querySelector('.ngx-dialog')));
                        (<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
                        this._utilityService.hideSpinner();
                        if (res) {
                            res.success ? this._utilityService.showToster(res.message, 'Notification', 'success') : this._utilityService.showToster(res.message, 'Notification', 'danger');
                            // this.getUsers();
                        }else{
                            (<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
                        }
                        this.getUsers();
                        this._utilityService.hideSpinner();
                    }, error => {
                        this._utilityService.hideSpinner();
                        (<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
                        console.log('User Delete Error : ', error);
                        // this._popupService.OpenError('Having some issue..!');
                        this._utilityService.showToster('Having Some Issue..!', 'Warning', 'warning');
                        this.getUsers();
                    })
            },
        })
    }
}

В этой функции удаления, когда я получил ответ от сервера, поэтому я закрываю этот модальный с помощью этого

(<HTMLElement>document.querySelector('#ngxdialog-1')).style.display = "none";

И это модальное закрытие только если я открою элемент проверки или если я изменю размер моего chrome на меньший экран. Но это не закрытие модального режима на экране рабочего стола. Я не знаю, почему это происходит. Если это модальное закрытие на меньшем экране, поэтому оно также должно закрывать модальное на экране рабочего стола. Он закрывает модальные, если я удаляю элемент при проверке элемента. Пожалуйста, смотрите это видео здесь

Answer 1

Проблема в том, что код внутри .subscribe() не запускает обновление в html. Исправление использует поставщик ngZone.

Вы можете попробовать запустить свой код внутри Angular NgZone :

import { Ngxalert } from 'ngx-dialogs';
import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {  }

// after class intialization
confirmAlert: any = new Ngxalert;

    delete = (rowData: Users) => {
    if (rowData) {
        this.confirmAlert.create({
            title: 'Delete Warning',
            message: 'Are you sure, you want to delete item?',
            confirm: () => {
                this._dataService.delete(this._constant.user + '/' + rowData._id)
                    .subscribe(res => {
                    this.ngZone.run(() => {
                        console.log('delete response : ',res);
                        console.log('html element',(<HTMLElement>document.querySelector('.ngx-dialog')));
                        (<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
                        this._utilityService.hideSpinner();
                        if (res) {
                            res.success ? this._utilityService.showToster(res.message, 'Notification', 'success') : this._utilityService.showToster(res.message, 'Notification', 'danger');
                            // this.getUsers();
                        }else{
                            (<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
                        }
                        this.getUsers();
                        this._utilityService.hideSpinner();
                    });
                    }, error => {
                        this._utilityService.hideSpinner();
                        (<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
                        console.log('User Delete Error : ', error);
                        // this._popupService.OpenError('Having some issue..!');
                        this._utilityService.showToster('Having Some Issue..!', 'Warning', 'warning');
                        this.getUsers();
                    })
            },
        })
    }
}

Вы можете найти проблему здесь: https://github.com/angular/angular/issues/31749

Answer 2

Звучит так, будто модал закрывается только при изменении размера, потому что изменение размера происходит, когда браузер должен повторно выполнить рендеринг, который применяет такие стили, как display: none. Я не очень знаком с Angular 7, но я думаю, что ответ - запустить рендер. Можете ли вы избавиться от тега, чтобы манипулировать DOM напрямую? Этот тег может ссылаться на виртуальный DOM.