Динамическое изменение DOM в Angular

Question

Я использую Angular Version 6 - я пытаюсь выполнить функциональность в Angular, которая довольно банальна для ванильного JavaScript.

this.value - это значение поиска по элементу ввода, place - это массив со свойствами города и штата - цель состоит в том, чтобы выделить текст, в котором выполняется поиск каждый результат в списке результатов.

Есть ли способ выполнить это в Angular? - Судя по прочтению документации ElementRef, похоже, что прямое изменение DOM таким способом не рекомендуется.

HTML

<ul class="suggestions"></ul>

JavaScript

const suggestions = document.querySelector('.suggestions'); 
const html = places.map(place => {
const regex = new RegExp(this.value, 'gi');
const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
return `<li><span class="name">${cityName}, ${stateName}</span></li>`;
}).join('');

suggestions.innerHTML = html;

Answer 1

Решение:

с использованием ngFor и привязки [innerHTML]

HTML

<ul class="suggestions">
  <li *ngFor="let place of places" [innerHTML]="buildHTML(place)">
</ul>

JS

buildHTML(place) {
  const regex = new RegExp(this.value, 'gi');
  const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
  const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
  return `<li><span class="name">${cityName}, ${stateName}</span></li>`;
}