在 ng-template 中使用 kendo-grid-column 的格式属性？

Posted 2023-05-07

【中文标题】在 ng-template 中使用 kendo-grid-column 的格式属性？

【英文标题】：Using format property of kendo-grid-column in ng-template?

【发布时间】：2019-01-29 18:14:29

【问题描述】：

kendo-grid-column 有一个很棒的列属性“格式”。还有it works perfectly.

<kendo-grid [data]="gridData">
    <kendo-grid-column field="UnitPrice" title="Unit Price" format="0:n0">
        <ng-template kendoGridCellTemplate format="0:n0" let-dataItem>
            <a href="#" class="badge badge-info"> dataItem?.UnitPrice </a>      
        </ng-template>
     </kendo-grid-column>
     <kendo-grid-column field="UnitPrice" title="Unit Price" format="0:n0">         
     </kendo-grid-column>
</kendo-grid>

我需要添加锚标记并使用kendo-grid-column 的format 属性。所以我将ng-template 添加到kendo-grid-column：

<kendo-grid-column field="UnitPrice" title="Unit Price" format="0:n0">
    <ng-template kendoGridCellTemplate format="0:n0" let-dataItem>
        <a href="#" class="badge badge-info"> dataItem?.UnitPrice  </a>
    </ng-template>
</kendo-grid-column>

但是，format="0:n0 在ng-template 中不起作用：

<ng-template kendoGridCellTemplate format="0:n0 let-dataItem>
    <a href="#" class="badge badge-info"> dataItem?.UnitPrice  </a>
</ng-template>

我创建了an example to show what I have。

是否可以在ng-template 中使用kendo-grid-column 的format 属性？

【问题讨论】：

你的意思是它设置为n0（没有小数位）并且值显示为两位小数，对吧？

@DontVoteMeDown 是的，你完全正确！

您是否尝试显式调用格式函数？见here

@ps0604 是的，我使用这些 Kendo 内置方法来格式化数字。你能写下你的回复，我会把它标记为答案。

【参考方案1】：

你应该使用剑道数字格式化函数，比如

kendo.toString(10.12, "n5"); //10.12000

或者只使用Kendo IntlService的方法：

formatNumber() parseNumber() 格式（）

【参考方案2】：

使用internationalization pipe。我找到了答案here。

<kendo-grid-column field="UnitPrice" title="Unit Price" format="0:n0">
    <ng-template kendoGridCellTemplate format="0:n0" let-dataItem>
        <a href="#" class="badge badge-info"> dataItem?.UnitPrice | kendoNumber: 'n0'  </a>
    </ng-template>
</kendo-grid-column>