javascript - วิธีปิด ngx-dialog เมื่อได้รับการตอบกลับจาก api โดยใช้ angular7?

ฉันมีแอปพลิเคชัน angular ที่ฉันได้ติดตั้ง ngx-dialogs เป็นกล่องยืนยันการลบรายการและมันทำงานอย่างถูกต้อง มันจะแจ้งเตือนผู้ใช้ก่อนลบ และเมื่อผู้ใช้คลิกที่ "ใช่" มันก็จะลบรายการออกจากรายการ แต่ฉันต้องการให้ปิดกล่องสนทนานั้นโดยอัตโนมัติเมื่อมีการตอบกลับจาก API การลบ

นี่คือโค้ด component.ts ของฉันซึ่งฉันกำลังสร้างไดอะล็อกภายในฟังก์ชัน delete ของฉันแบบนี้

delete = (rowData: Category) => {
    if (rowData) {
        this.confirmAlert.create({
            title: 'Delete Warning',
            message: 'Are you sure, you want to delete Company?',
            confirm: () => {
                this._utilityService.showSpinner();
                this._dataService.delete(this._const.category + '/' + rowData._id).subscribe((delres: any) => {
                    console.log('Self Category Delete Response : ', delres);
                    this._utilityService.hideSpinner();
                    delres.success ? this._utilityService.showToster(delres.message, 'Notification', 'success') : this._utilityService.showToster(delres.message, 'Notification', 'danger');
                    this.reset();
                    this.getCategory();
                }, (error: any) => {
                    this._utilityService.hideSpinner();
                    console.log('Self Category Delete Error : ', error);
                    this._utilityService.showToster('Having some issue, Please try later!', 'Warning', 'warning')
                    this.reset();
                    this.getCategory();
                })
            },
        })
    }
}

หมายเหตุ: เมื่อฉันลองสิ่งนี้

document.querySelector('.ngx-dialog').style.display = "none" 

ในการตอบกลับ API การลบ จึงแสดงข้อผิดพลาดแบบนี้

Property 'style' does not exist on type 'Element'

ฉันจะปิดกล่องโต้ตอบนี้หลังจากลบการตอบสนอง api ได้อย่างไร?

คำตอบ #1

ฉันได้พบคำตอบสำหรับปัญหาของฉันแล้ว เมื่อฉันพยายามที่จะดึงองค์ประกอบโดยใช้จาวาสคริปต์แบบนี้

document.querySelector('.ngx-dialog')).style.display = "none"

ดังนั้นฉันจึงได้รับข้อผิดพลาดแบบนี้

Property 'style' does not exist on type 'Element'

ดังนั้นหลังจากนั้นฉันก็ลองสิ่งนี้และมันก็ได้ผลสำหรับฉันอย่างสมบูรณ์

(<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";

คำตอบ #2

ฟังก์ชันที่กำลังถูกเรียกใช้งานหลังจากการคลิก ให้เขียนโค้ดคำสั่ง query ที่สามารถดึงแท็ก dialog โดยใช้ document.querySelector('.dialog') จากนั้นคุณสามารถเรียกใช้เมธอด hide ได้หาก dialog ของคุณมีเมธอดนี้ มิฉะนั้นคุณสามารถสร้างเมธอด hide ของคุณเองได้

ตัวอย่างเช่น: - <button ngClick=(deleteRecord(id)>ลบ</button> หากปุ่มนี้ปรากฏในกล่องโต้ตอบของฉัน จากนั้นภายในฟังก์ชันนั้นคุณสามารถเขียน

deleteRecord(id: int) {
// pass the id or class name of your dialog
const dialog = (<HTMLElement>document.querySelector('.dialog'))

// after API returns the success for deletion of your record
if(response_of_api === 'success') {
 dialog.hide() // if your dialog has a hide function

// or
dialog.style.display = 'none'
 }
}

ในกรณีของคุณ แนวคิดนี้สามารถนำไปใช้หลังบรรทัดด้านล่าง

console.log('Self Category Delete Response : ', delres);