无法在 primeNG p-columnFilter 中输入小数点

Question

我在 angular 项目的模式中使用 p-table 和 p-columnFilter 组件。

我正在使用以下库：

"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primeng": "^11.2.0",
"@angular/cli": "^11.2.5",

这是我的 HTML:

<th>
    <div class="flex justify-content-center align-items-center">
            Pressure ({{pressureUnits}})
        <p-columnFilter type="numeric" field="tyre_pressure" display="menu">
        </p-columnFilter>
    </div>
</th>

除了 p 列内部生成的输入外，一切都很好。过滤器中只能输入数字，不能输入小数。

在输入中键入 56.8 或将 56.8 粘贴到输入中无效。

** 解决方案 ** 使用 yoelb00 回答这是有效的代码：

<div class="flex justify-content-center align-items-center">
    Pressure ({{pressureUnits}})
    <p-columnFilter field="tyre_pressure" matchMode="equals" display="menu">
        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
            <input type="number" pInputText [ngModel]="value" (ngModelChange)="filter($event)" class="p-inputtext">
        </ng-template>
    </p-columnFilter>
</div>

Answer 1

你可以使用ng-template，你可以写你自己的输入，它会解决你的问题

  <p-columnFilter type="number" field="tyre_pressure" display="menu">
    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                    <input type="number" pInputText [ngModel]="value" (ngModelChange)="filter($event)" class="p-inputtext"> </ng-template>
  </p-columnFilter>

Answer 2

你可以在下面的例子中像货币一样使用管道

Price <p-columnFilter type="numeric" field="finalPrice" display="menu" currency="SAR"></p-columnFilter> <p-sortIcon field="finalPrice"></p-sortIcon>

无法在 primeNG p-columnFilter 中输入小数点

Cannot enter decimal point in primeNG p-columnFilter

primeng