Angular 使用自定义按钮从剑道网格中获取数据项

我试图将数据项从剑道网格传递到Angular 6上的组件。设置如下

<kendo-grid
      [data]="view | async"
      [height]="533"
      (dataStateChange)="onStateChange($event)"
      (edit)="editHandler($event)" (remove)="removeHandler($event)"
      (add)="addHandler($event)"
    >
    <ng-template kendoGridToolbarTemplate>
        <button kendoGridAddCommand>Add new</button>
    </ng-template>
    <kendo-grid-column field="Id" title="ID"></kendo-grid-column>
    <kendo-grid-column field="Name" title="Company Name"></kendo-grid-column>
    <kendo-grid-column field="BillingInfo.BillingGroup" title="Group"></kendo-grid-column>
    <kendo-grid-column field="DefaultProcessingLocation" title="Default Location"></kendo-grid-column>
    <kendo-grid-column field="BillingInfo.BillingCode" title="Code"></kendo-grid-column>
    <kendo-grid-command-column title="Action" width="300">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button kendoGridEditCommand [primary]="true">Edit</button>
            <button kendoGridRemoveCommand>Delete</button>
            <button (click)="getCustomerJobs(dataItem)">Jobs</button>
        </ng-template>
    </kendo-grid-command-column>
  </kendo-grid>

  <app-edit-customer [model]="editDataItem" [isNew]="isNew"
  (save)="saveHandler($event)"
  (cancel)="cancelHandler()">
</app-edit-customer>

新增
编辑
删除
乔布斯

当我点击编辑或删除数据项时，我看到了数据项。但是，当我单击“作业”时，getCustomerJobs会将dataItem返回为“未定义”

---

提前谢谢你的帮助。

我相信你就快到了。问题是剑道网格列上的标记

更改此（剑道网格命令列）

编辑
删除
乔布斯

到这个（剑道网格列）

编辑
删除
乔布斯

谢谢！尝试了这个，我仍然得到同样的问题。我尝试过像这样选择整行

我也没有定义。看看我创建的Stackblitz示例是否有帮助。我接受了您提供的代码，使用剑道文档将其包装在Stackblitz示例中，当启动getCustomerJobs（）时，控制台正在编写dataItem：谢谢，现在可以了。我想当我可以得到整个对象时，我正在尝试创建数据项，就像你所做的那样。从那里我可以找出selectedItem。

 <kendo-grid-command-column title="Action" width="300">
    <ng-template kendoGridCellTemplate let-dataItem>
        <button kendoGridEditCommand [primary]="true">Edit</button>
        <button kendoGridRemoveCommand>Delete</button>
        <button (click)="getCustomerJobs(dataItem)">Jobs</button>
    </ng-template>
</kendo-grid-command-column>

 <kendo-grid-column title="Action" width="300">
    <ng-template kendoGridCellTemplate let-dataItem>
        <button kendoGridEditCommand [primary]="true">Edit</button>
        <button kendoGridRemoveCommand>Delete</button>
        <button (click)="getCustomerJobs(dataItem)">Jobs</button>
    </ng-template>
</kendo-grid-column>