Передача произвольных данных в дочернюю директиву

Я использую директиву 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 есть ли другой способ достичь моей цели (я хочу, чтобы отображалась кнопка расширения + только для строк, содержащих подробные данные)?


typescript angular wijmo
person John Montgomery    schedule 14.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел решение, но оно похоже на плохой 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 позволяет провести сравнение, но на самом деле это не похоже на «правильный» способ ведения дел.

person John Montgomery    schedule 15.08.2017