Angular 5.2.3 привязка данных к атрибуту данных с дефисом в имени

Question

Использование угловых 5.2.3.

Насколько я понимаю, это действительный HTML

<div data-automation-for="howdy"></div>

Однако, когда он пытается привязать данные к нему, как это

data-automation-for="{{day.date | dateFormat:'MMMM'}}"

Я получаю следующую ошибку

Can't bind to 'automation-for' since it isn't a known property of 'div'. ("<div style="display: inline-block" [ERROR ->]data-automation-for="{{dateContext | dateFormat:'MMMM'}}">")

После поиска я нашел следующие два возможных решения

attr.data-automation-for="{{day.date | dateFormat:'MMMM'}}"

и

[attr.data-automation-for]="day.date | dateFormat:'MMMM'"

Однако оба они тоже ошибаются. Похоже, что эти решения не обрабатывают лишние дефисы.

Теперь я понимаю, что могу полностью ошибиться, и лишние дефисы недействительны, но я не нашел ничего подтверждающего это.

Спасибо за понимание.

Answer 1

Я создал для вас минимальный пример StackBlitz .

Основной вывод: Вы, вероятно, неправильно истолковали документацию даты трубы.

<div [attr.data-automation-for]="dateContext | date:'MMMM'">

Примечание. Интерполяция (с использованием переменной через {{varName}} ) используется только вне других тегов HTML.