<p-dialog> 中的复选框切换无法通过 UI 手动工作

Question

我正在努力在 primeng 包的 'p-dialog' 部分添加复选框。但是，我遇到了 UI 问题，当我尝试从 UI 手动选中取消选中复选框时，它不起作用，更改或单击事件也不会为此触发。在下面发布与复选框相关的部分代码。有人可以建议需要修复什么才能使其正常工作。

Html代码

<p-dialog modal="modal" width="600" [responsive]="true" [closable]="false">
    <p-header>
      <span>Dialog</span>
    </p-header>
    <input type="checkbox" [name]="chkMyself" [id]="chkMyself" (change)="toggleVal($event)" >             
              <label for="chkMyself">Myself</label>
</p-dialog>

组件代码



import { Component,  Output,ViewChild, EventEmitter, ViewEncapsulation } from '@angular/core';
import { Dialog } from 'primeng/primeng';

@Component({
  selector: 'app-dialog',
  templateUrl: './app-dialog.component.html',
  styleUrls: ['./app-dialog.component.scss']
})
export class AppDialogComponent {
  
  @ViewChild(Dialog) public theDialog: Dialog;
  public dialogTitle: string;
  public chkMyself: boolean = false; 

  constructor( ) {       
    }
    private _display: boolean = false;

    get Display(): boolean {
        return this._display;
    }
    set Display(val: boolean) {
        this._display = val;
        if(val){
          this.show("Dialog Test");
        }       
    }
     
  public toggleVal(event): void {
   debugger
    this.chkMyself = !event.target.checked;
}
 
  public show(dialogTitle: string)
  {    
     this.dialogTitle = dialogTitle;  
      this.theDialog.visible=true;
  }
}

Answer 1

发布对我有用的解决方案在下面尝试过，它对我有用。
我自己

Answer 2

NAME属性在浏览器发送给服务器的HTTP请求中作为变量名使用，它与value属性中包含的数据相关联。表单元素的 ID 与它无关。它只是一个标识，与元素中包含的数据无关。

<p-dialog> 中的复选框切换无法通过 UI 手动工作

Checkbox toggle within <p-dialog> not working manually through UI

checkbox

primeng

angular

primeng-dialog