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

【问题标题】：Cannot enter decimal point in primeNG p-columnFilter无法在 primeNG p-columnFilter 中输入小数点
【发布时间】：2022-07-27 19:30:54
【问题描述】：

我在我的 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>

【问题讨论】：

标签： primeng

【解决方案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>

【讨论】：

漂亮，知道如何添加更多过滤器选项，例如大于、小于等吗？
您只需要在过滤器菜单中按等号，然后您可以选择大于、小于等。
对不起@yoelb00。提供的代码仅创建输入 = 框，顶部只有一个下拉菜单，只有 2 个选项：“匹配所有”和“匹配任何”

【解决方案2】：

您可以在以下示例中使用类似于货币的管道

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

【讨论】：

这似乎只在您添加货币时才有效，但在我的情况下，字段十进制数字我不想要货币符号。知道如何实现吗？
你可以使用@yoelb00的答案

【解决方案3】：

您可以使用两个用于 p-columnFilter 组件的输入参数。它们是 minFractionDigits 和 maxFractionDigits。如果您提供它们，您应该能够输入十进制值。请看下面的例子：

    <p-columnFilter
      type="numeric"
      [minFractionDigits]="2"
      [maxFractionDigits]="2"
      field="outcomePriceYes"
      display="menu"
      class="p-ml-auto"
    ></p-columnFilter>

【讨论】：