Question

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

<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">

但收到了错误：

未捕获（承诺）：错误：模板解析错误：属性绑定数据 - 详细信息未被嵌入式模板上的任何指令使用。确保属性名称拼写正确，并且所有指令都列在“@ NgModule.declarations”中。

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

Answer 1

我找到了一个解决方案，但感觉好像是Angular，所以希望那里仍然有更好的答案。

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

<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可以进行比较，但它确实不会感觉像是＆＃34;正确＆＃34;做事的方式。

将任意数据传递给子指令

1 个答案: