ng-template中的剑道角度网格列传递数据项

Posted 2023-05-07

【中文标题】ng-template中的剑道角度网格列传递数据项

【英文标题】：Kendo angular grid column pass dataitem in ng-template

【发布时间】：2018-11-21 17:09:44

【问题描述】：

我正在使用带有 Kendo 控件的 Angular 5.2。在网格内部，我有一个带有 click 属性的按钮。我想将 PID 值作为参数传递给 showwindow 函数。

这是代码示例：-

 <kendo-grid [data]="gridView"
                (pageChange)="pageChange($event)"
                [selectable]="true"
                [kendoGridSelectBy]="mySelectionKey"
                [selectedKeys]="mySelection"
                style="width:1100px;">
        <kendo-grid-checkbox-column showSelectAll="true"  media="(min-width: 10px)">
            <ng-template kendoGridHeaderTemplate let-dataItem>
                <input type="checkbox"
                       name="selectAll"
                       (change)="selectAllRows($event)"
                       [checked]="allRowsSelected" />
            </ng-template>
        </kendo-grid-checkbox-column>
        <kendo-grid-column field="PID" title="User ID"  media="(min-width: 10px)">
        </kendo-grid-column>

        <kendo-grid-command-column title="View file"  media="(min-width: 10px)">
            <ng-template kendoGridCellTemplate let-isNew="isNew">
                <button (click)="showwindow(pass the PID value here)">
                    <img src="../../../../../Images/view.png" />
                </button>
            </ng-template>
        </kendo-grid-command-column>
    </kendo-grid>

这是我要更改的按钮单击处理程序：-

 <button (click)="showwindow(pass the PID value here)">
     <img src="../../../../../Images/view.png" />
  </button>

请提出解决方案。

【参考方案1】：

您可以通过kendoGridCellTemplate 指令的模板上下文访问当前行dataItem（和其他变量）。 (API Reference)

<kendo-grid-command-column ...>
    <ng-template kendoGridCellTemplate let-dataItem>
        <button (click)="showwindow(dataItem.PID)">
            <img src="../../../../../Images/view.png" />
        </button>
    </ng-template>
</kendo-grid-command-column>

【讨论】：

我只是好奇let-... 的语法是什么？有可能在某处读到它吗？好像在文档中遇到了let-...的解释，但是再也找不到了。

@SasukeUchiha ngTemplateOutlet Docs 有一个例子。但基本上你传入context 的所有内容都可以通过let- 访问。至于剑道，他们的文档做得很好，所以你应该看看那里有什么。

知道了。谢谢。

如何在kendo-grid-command-column 中访问dataItem？我想使用“dataItem”进行条件样式。

@hirani89 您不能直接在kendo-grid-command-column 中访问dataItem。你总是需要使用 ng-template 和 kendoGridCellTemplate 指令，如我的示例所示。