為什么我通過 javascript 的 css 樣式不適用於桌面屏幕大小？

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。