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

我有一个

angular7

应用程序，我正在其中使用

ngx对话框

。我使用此模式进行确认模式用于删除目的。我打开modal以提示用户“您要确保删除”，若用户单击“是”，则项目被删除，modal应关闭。我在我的

组件.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();
                    })
            },
        })
    }
}

从“ngx对话框”导入{Ngxalert}；
//课后初始化
confirmAlert:any=新的Ngxalert；
删除=（行数据：用户）=>{
如果（行数据）{
这个.confirmAlert.create({
标题：“删除警告”，
消息：“确实要删除项目吗？”，
确认：（）=>{
this.\u dataService.delete（this.\u constant.user+'/'+rowData.\u id）
.订阅（res=>{
log（'delete response:'，res）；
log（'html元素'，（document.querySelector（'.ngx dialog'））；
（document.querySelector（'.ngx dialog'））.style.display=“无”；
这是。_utilityService.hideSpinner（）；
如果（res）{
res.success？this._utilityService.showToster（res.message，'Notification'，'success'）：this._utilityService.showToster（res.message，'Notification'，'danger'）；
//这是getUsers（）；
}否则{
（document.querySelector（'.ngx dialog'））.style.display=“无”；
}
这是getUsers（）；
这是。_utilityService.hideSpinner（）；
}，错误=>{
这是。_utilityService.hideSpinner（）；
（document.querySelector（'.ngx dialog'））.style.display=“无”；
log（'用户删除错误：'，错误）；
//这是.\u popupService.OpenError（'有一些问题…！'）；
这是。_utilityService.showToster（'Having Some problem..！'，'Warning'，'Warning'）；
这是getUsers（）；
})
},
})
}
}

在这个删除函数中，当我收到服务器的响应时，我使用这个

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

（document.querySelector（'ngxdialog-1'））.style.display=“无”；

只有当我打开inspect元素或者将chrome调整到更小的屏幕时，它才会关闭。但它并没有在桌面屏幕上关闭模式。我不知道为什么会这样。若它在较小的屏幕上关闭模式，那个么它也应该在桌面屏幕上关闭模式。如果我在检查元素时删除项，它将关闭模式。请参阅此视频
问题在于
中的代码。subscribe（）
不会触发html中的更新。修复程序正在使用ngZone提供程序

您可以尝试在内部运行代码：

从“ngx对话框”导入{Ngxalert}；
从“@angular/core”导入{NgZone}；
构造函数（专用ngZone:ngZone）{}
//课后初始化
confirmAlert:any=新的Ngxalert；
删除=（行数据：用户）=>{
如果（行数据）{
这个.confirmAlert.create({
标题：“删除警告”，
消息：“确实要删除项目吗？”，
确认：（）=>{
this.\u dataService.delete（this.\u constant.user+'/'+rowData.\u id）
.订阅（res=>{
此.ngZone.run（（）=>{
log（'delete response:'，res）；
log（'html元素'，（document.querySelector（'.ngx dialog'））；
（document.querySelector（'.ngx dialog'））.style.display=“无”；
这是。_utilityService.hideSpinner（）；
如果（res）{
res.success？this._utilityService.showToster（res.message，'Notification'，'success'）：this._utilityService.showToster（res.message，'Notification'，'danger'）；
//这是getUsers（）；
}否则{
（document.querySelector（'.ngx dialog'））.style.display=“无”；
}
这是getUsers（）；
这是。_utilityService.hideSpinner（）；
});
}，错误=>{
这是。_utilityService.hideSpinner（）；
（document.querySelector（'.ngx dialog'））.style.display=“无”；
log（'用户删除错误：'，错误）；
//这是.\u popupService.OpenError（'有一些问题…！'）；
这是。_utilityService.showToster（'Having Some problem..！'，'Warning'，'Warning'）；
这是getUsers（）；
})
},
})
}
}

您可以在此处找到问题：
这听起来像是只有在调整大小时模式才会关闭，因为调整大小是在浏览器必须重新渲染时进行的，这将应用诸如display:none之类的样式。我不太熟悉Angular 7，但我认为答案是触发渲染。你能去掉标记直接操作DOM吗？该标记可能引用虚拟DOM。
太好了。这起作用了。但是你能解释一下你的答案吗？
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();
                    })
            },
        })
    }
}