Атрибуты в тегах html и angular не работают

Question

Я создаю приложение для студентов, где пользователь сможет выделить текст и выделить его. Теперь я делаю, чтобы выбранный текст сохранялся на сервере, чтобы иметь постоянный маркер, в документе каждый абзац является блоком, и у каждого блока есть идентификатор, таким образом я могу знать, где был сделан выбор, когда я получаю маркер с сервера, я получаю список маркеров для документа, я использую начало и конец выбора, чтобы знаю, где мне нужно поместить маркер в тексте, когда я использую маркер, я создаю строку, подобную этой:

const markerText = `<mark class="${marker.color}"
    data-marker-id="${marker.id}">${textSelected}</mark>`;

и я заменил его на исходный текст, но по какой-то причине при замене текста в html появляется только атрибут class тега mark, по какой-то причине data-marker-id этого нет.

Я пытаюсь использовать событие [attr.data-marker.id]="${marker.id}"

поскольку абзац (блоки текста) поступают с сервера с разметкой html, я получаю содержимое блока с тегами html в виде строки, поэтому я использую

<p [innerHTML]="block.text"></p>

есть идеи почему ....?

Answer 1

Я думаю, что команды Angular сбросили функциональность $ compile в Angular (2+). Все еще можно загрузить удаленные строки html и поместить их в [innerHTML], но это все. Не существует ни собственного, ни простого способа интерполировать данные из удаленного HTML.

Смотрите это сообщение: https://medium.com/lacolaco-blog/forget-compile-in-angular-2-a2893d8291b1