为什么我通过 javascript 的 css 样式不适用于桌面屏幕大小？

Question

I have an angular7 app in which i am using ngx-dialogs . I am using this modal for confirmation modal for delete purpose. I open modal to prompt user that "you want to sure to delete", if user click on "Yes" so item is deleted and modal should be close. I have this implementation in my 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();
                    })
            },
        })
    }
}

In this delete function when i received response from sever so i close that modal using this

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

And it modal is closing only if i open inspect element or if i resize my chrome to smaller screen. But it's not closing modal on desktop screen. I don't know why is it happening. If it is closing modal on smaller screen so it should also close modal on desktop screen. It closes the modal if i delete item when inspect element. Please refer this video here

Answer 1

The issue is the code inside .subscribe() does not trigger an update in the html. A fix is using the ngZone provider.

You can try running your code inside 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();
                    })
            },
        })
    }
}

You can find the issue here: https://github.com/angular/angular/issues/31749

Answer 2

It sounds like the modal is only closing on resize because resize is when the browser has to re-render, which applies the styles such as display:none. I'm not super familiar with Angular 7 but I think the answer is to trigger a render. Can you get rid of the tag to manipulate the DOM directly? That tag may refer to a virtual DOM.