Question

我正在使用灌注组件p-calendar和p-table。工作流程如下：p-calendar行中有两个p-table。问题是，当我单击第二个p-calendar方法时，onClose()不会触发，只有当我首先在p-table之外单击时，它才会触发。在我的代码下面：

<p-table [value]="list" [style]="{width: '60%', 'text-align': 'center'}">
<ng-template pTemplate="header">
<tr>
  <th scope="col">libelle</th>
  <th scope="col">date debut</th>
  <th scope="col">date fin</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-element>
<tr>
  <!-- colonne libelle -->
  <td pEditableColumn>
    <p-cellEditor>
      <ng-template pTemplate="input">
        <div class="ui-inputgroup">
          <input pInputText type="text" style="text-align: center"
                 class="form-control"
                 [(ngModel)]="data.libelle">
        </div>
      </ng-template>
      <ng-template pTemplate="output" style="text-align: center">
        {{ element?.libelle}}
      </ng-template>
    </p-cellEditor>
  </td>

  <!-- colonne date debut-->
  <td pEditableColumn>
    <p-cellEditor>
      <ng-template pTemplate="input">
        <div class="ui-inputgroup">
          <p-calendar [(ngModel)]="element.dateDebut" [timeOnly]="true"
                      (onClose)="validerHeureDebut(element)"></p-calendar>
        </div>
      </ng-template>
      <ng-template pTemplate="output">
        <div>
          {{ element?.dateDebut | date:'HH:mm'}}
        </div>
      </ng-template>
    </p-cellEditor>
  </td>

  <!-- colonne date fin-->
  <td pEditableColumn>
    <p-cellEditor>
      <ng-template pTemplate="input">
        <div class="ui-inputgroup">
          <p-calendar [(ngModel)]="element.dateFin" [timeOnly]="true"
                      (onClose)="validerHeureFin(element)"></p-calendar>
        </div>
      </ng-template>
      <ng-template pTemplate="output">
        <div>
          {{ element?.dateFin | date:'HH:mm'}}
        </div>
      </ng-template>
    </p-cellEditor>
  </td>
</tr>

stackblitz example

Answer 1

已解决。删除pEditableColumn和<p-cellEditor>

后，此问题已解决

p日历上的onClose不会触发

1 个答案: