Angular - kendo-grid-column - 绑定(bind) html 数据

Question

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

Answer 1

您可以使用 cell template 中的包装器元素呈现 HTML ，并将其 innerHtml 属性绑定(bind)到数据项字段，其中包含您要呈现的 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>"
    },

EXAMPLE