从 onDeactivate 访问 p-inplace 内容值

Question

我正在使用 primeNg 的 p-inplace。我想在调用onDeactivate时调用一个函数，使用pTemplate content.

的值

代码片段：

<p-inplace [closable]="true" (onDeactivate)="doSomething(???)">
   <ng-template pTemplate="display">
      <label>xxx</label>
   </ng-template>
   <ng-template pTemplate="content">
      <input type="text" #myInput pInputText [ngModel]="someReadonlyInitialData">
   </ng-template>
</p-inpace>

我想将输入到 myInput 的值发送到 ???是。如果它不在模板中，我可以通过 doSomething(myInput.value) 发送，但由于它在模板中，因此在那里无法识别。

有人对此有解决方案或解决方法吗？

Answer 1

很遗憾，您不能使用您已经知道的 template-variable-reference。

我解决你问题的方法是将更改保存在模板中的另一个变量中，以便你可以在需要时使用它，并将模板函数中的参数留空doSomething()。

<p-inplace [closable]="true" (onDeactivate)="doSomething()">
   <ng-template pTemplate="display">
      <label>xxx</label>
   </ng-template>
   <ng-template pTemplate="content">
      <input type="text" #myInput pInputText [ngModel]="someReadonlyInitialData" (ngModelChange)="someData = $event">
   </ng-template>
</p-inpace>

在你的 ts 文件中：

someData: string;

doSomething() {
  /* now your value is inside this.someData /*
}

PS：我猜你不想使用双向绑定，如果你不介意，你不需要创建第二个变量。您可以：

[(ngModel)]="someData"

Answer 2

除了 StPaulis 的回答，如果在表单标签中使用了 ngModel，请不要忘记添加 name 属性。所以输入将如下所示：

 <input type="text" pInputText [(ngModel)]="someData" name="someData">

从 onDeactivate 访问 p-inplace 内容值

access p-inplace content value from onDeactivate

angular

primeng

ng-template