pKeyFIlter：NG8007：双向绑定“ngModel”的属性和事件部分未绑定到同一目标

Question

我已将使用 primeng 控件的 Angular 11 项目更新为 Angular 12。完成后，primeng pKeyFilter 在使用的​​所有地方都会抛出错误。从头开始创建一个新的 Angular 12 项目不会出现这个问题。升级后，其他一切似乎都工作正常。有什么想法吗？

这是组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-key',
  templateUrl: './key.component.html',
  styleUrls: ['./key.component.scss']
})
export class KeyComponent implements OnInit {
  public myvalue: string = '';

  constructor() { }

  ngOnInit(): void {
  }

}

这是 HTML

<input type="text" pInputText [(ngModel)]="myvalue" pKeyFilter="int"/>

<p>
  <span>{{myvalue}}</span>
</p>

这是完整的错误

错误：src/app/modules/nourishment/pages/test/key/key.component.html:1:23 - 错误 NG8007：双向绑定“ngModel”的属性和事件部分未绑定到同一目标。欲了解更多信息，请访问https://angular.io/guide/two-way-binding#how-two-way-binding-works

1 <input type="text" [(ngModel)]="myvalue" pKeyFilter="int"/> ~~~~~~~

node_modules/@angular/forms/forms.d.ts:3297:22 3297导出声明类NgModel扩展NgControl实现OnChanges，OnDestroy {〜~~~~~~绑定的属性一半是到'NgModel'组件。

node_modules/primeng/keyfilter/keyfilter.d.ts:6:22 6导出声明类KeyFilter实现Validator { ~~~~~~~~~ 绑定的事件一半是到'KeyFilter'组件。

src/app/modules/nourishment/pages/test/key/key.component.ts:5:16 5 templateUrl: './key.component.html', ~~~~~~~~~~~~~~~ ~~~~~~~~ 组件KeyComponent的模板出现错误。

我了解错误背后的基础知识，但我无法弄清楚是什么触发了它。我在父模块中导入了素数 InputModule 和 KeyFilterModule 以及 FormsModule 。同样，这一切在升级之前都是有效的。https://www.primefaces.org/primeng/showcase/#/keyfilter

Answer 1

我刚刚更改了第一个中的 [(ngModel)] 和最后一个中的 [pKeyFilter] 的顺序

从：

<input type="text"  pInputText [pKeyFilter]="'money'" [(ngModel)]="tare" >

到：

<input type="text"  pInputText  [(ngModel)]="tare" [pKeyFilter]="'money'" >

效果很好

Answer 2

就我而言，我尝试以两种方式对自定义属性进行数据绑定，但为了允许我必须添加一个事件。

@Input() value: unknown
@Output() valueChange = new EventEmitter<unknown>();

Answer 3

我打开了一个新问题来解决这个问题：

https://github.com/primefaces/primeng/issues/10524