将任意数据传递给子指令

Question

我正在使用 Wijmo 的 wjFlexGridDetail 指令，并希望根据组件中的 "detailData" 数组是否包含任何匹配数据来控制哪些行显示详细信息网格。 rowHasDetail 属性采用一个函数，该函数使用外部网格的行作为输入，returns 是一个布尔值。我想做这样的事情：

<ng-template wjFlexGridDetail let-item="item" [rowHasDetail]="hasDetail">

hasDetail (row): boolean {
    return this.detailData.filter(item => item.ID === row.dataItem.ID).length > 0
} // detailData is undefined when I try this

但这不起作用，因为函数范围内的 this 指的是 wjFlexGridDetail 对象，它不包含我要检查的数据。我尝试将其绑定为数据属性：

<ng-template wjFlexGridDetail let-item="item" [rowHasDetail]="hasDetail" [attr.data-detail]="detailData">

但出现错误：

Uncaught (in promise): Error: Template parse errors: Property binding data-detail not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

是否有另一种方法可以将该数据放入函数的范围内？或者专门针对 wjFlexGridDetail 用法，是否有另一种方法可以实现我的目标（我希望它只显示具有详细数据的行的 + 扩展按钮）？

Answer 1

我找到了解决方案，但感觉很糟糕 Angular 所以希望还有更好的答案。

bind函数可以将任何数据添加到函数的范围内。不要直接传入函数，而是调用一个 returns 函数并将数据绑定到它的函数。

<ng-template wjFlexGridDetail let-item="item" [rowHasDetail]="hasDetail()"><!-- note the () -->

hasDetail (): (row) => boolean {
    return function (row): boolean {
        return this && this.filter(item => item.ID === row.dataItem.ID).length > 0
    }.bind(this.detailData)
}

将函数的范围更改为detailData可以进行比较，但感觉确实不像"correct"的处理方式。

将任意数据传递给子指令

Passing arbitrary data to a child directive

wijmo

typescript

angular