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

Question

我正在努力在primeng package的“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

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

Answer 2

发布对我有用的解决方案在下面尝试过，它对我有用。 <input type="checkbox" name="chkMyself" id="chkMyself" (change)="toggleVal($event)" >
我