Question

我有一个看似像这样的角度2剑道网格组件

<kendo-grid [data]="gridView"
        [selectable]="true"
        [pageSize]="pageSize"
        [skip]="skip"
        [pageable]="true"
        [sortable]="{ mode: 'multiple' }"
        [sort]="sort"
        (pageChange)="pageChange($event)">
<kendo-grid-column Title="Select">
    <template kendoCellTemplate let-dataItem>
        <input type="checkbox" (change)="onContactsSelect(dataItem.accountId, $event)"/>            
    </template>        
</kendo-grid-column>

<kendo-grid-column field="accountId" title="{{result.accountColumn}}" ></kendo-grid-column>
<kendo-grid-column field="name" title="{{result.nameColumn}}"></kendo-grid-column>
<kendo-grid-column field="address" title="{{result.addesssColumn}}"></kendo-grid-column>
<kendo-grid-column field="state" title="{{result.statusColumn}}"></kendo-grid-column>
<kendo-grid-column field="customField1" title="{{result.customField1Column}}"></kendo-grid-column>
<kendo-grid-column field="customField2" title="{{result.customField2Column}}"></kendo-grid-column>
<kendo-grid-column field="timeStamp" title="{{result.timeStampColumn}}"></kendo-grid-column>   
<template kendoDetailTemplate let-dataItem>
        <section *ngIf="!dataItem.isValid">
            <article>{{dataItem.errorMessage}}</article>
        </section>
</template>

我确实希望仅在出现错误消息时或仅在数据项无效时显示详细信息行（以及在打开和关闭详细行之间切换的详细信息k-plus和k-minus符号）。

现在，无论数据项是否有效，切换按钮都会出现在所有行上。

任何指针都会有所帮助。

Answer 1

我知道这是一个稍微老一点的线程，但我确实设法提出了如何执行此操作的解决方案：

首先摆脱

<section *ngIf="!dataItem.isValid>
    ...
</section>

你想：

<template kendoDetailTemplate let-dataItem>
          [kendoGridDetailTemplateShowIf]="condition"
        ...whatever you want to show based on the condition...
</template>

上面的kendoGridDetailTemplateShowIf旁边的条件是具有相同名称的typescript文件上的函数，它将采用dataitem作为参数的任何内容（请注意，您不编写它是带有HTML参数的函数）。 TS文件中的函数应该返回一个布尔值，其中true将显示展开按钮而false将不会，因此显示或不显示详细信息模板。

所以在打字稿文件中：

condition(dataItem: any) : boolean {
    return !dataItem.isValid;
}

希望这有帮助。

作为旁注（与答案无关，但个人投诉可以随意跳过）这只是Telerik在文档方面很糟糕的另一个例子，即使你可以借助这样的网站来解决这个问题用它们的框架进行开发可能很痛苦。

如何使用Angular 2在Kendo Grid中显示和隐藏Detail Row

1 个答案: