1

我正在努力在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;
  }
}
4

2 回答 2

1

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

于 2021-05-17T10:16:28.640 回答
0

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

于 2021-04-19T08:33:01.800 回答