Angular - kendo-grid-column - 绑定html数据

Question

我可以直接将预先格式化的值绑定到剑道网格列吗？数据包含 html 标签，我希望该列以格式呈现数据，而不是将标签视为文本。我可以ng-template用来实现所需的输出，但为此我需要解析整个数据，将其存储到不同的键中并使用它们在 .html 文件中进行格式化。无论如何我可以让剑道在列内渲染html吗？

Answer 1

您可以使用单元格模板中的包装元素呈现 HTML ，并将其innerHtml属性绑定到包含您要呈现的 HTML 的数据项字段，例如：

<kendo-grid-column field="htmlField">
              <ng-template kendoGridCellTemplate let-dataItem>
                <div [innerHtml]="dataItem.htmlField"></div>
              </ng-template>
            </kendo-grid-column>

模型：

{
        "ProductID": 1,
        "ProductName": "Chai",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "10 boxes x 20 bags",
        "UnitPrice": 18,
        "UnitsInStock": 39,
        "UnitsOnOrder": 0,
        "ReorderLevel": 10,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
        },
        "FirstOrderedOn": new Date(1996, 8, 20),
        "htmlField": "<h1>RENDERED HTML</h1>"
    },

例子