Динамическое создание интерактивного div с Angular 6

Question

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

Так что в идеале я хотел бы создать несколько div (или кнопок) вокруг каждого лица и иметь что-то вроде (click) = "divClicked ()" для каждого элемента. Однако (щелчок) не является допустимым атрибутом, поэтому, например, попробуйте что-то вроде

d3.select('button').attr('(click)','onClickMe()');

выдает ошибку. onclick является легитимным атрибутом, но, используя его, я думаю, что я должен сломать способ, которым Angular хочет, чтобы я работал (поскольку помещение функции в файл ts компонента дает ошибку, onClickMe не определена).

Самый лучший обходной путь, который я мог бы придумать, - назначить идентификатор каждому div и затем сделать что-то вроде

document.getElementById('b1').onclick=this.onClickMe;

но это похоже на плохое кодирование.

Итак, как это сделать?

Answer 1

Я думаю, вам следует создать элементы div, добавив цикл с ngFor в шаблон , чтобы отобразить ваши div . Конечно, они могут быть в стиле CSS, основываясь на некоторых свойствах, которые вы определили заранее (в частности, здесь полезны свойства CSS left и top). Конечно, вы можете добавить (click) событие к этим div s.

Для этого ваш компонент должен содержать список объектов для отображения, который вы можете обновить при необходимости. Кроме того, он должен предлагать метод, который вызывается, когда пользователь хочет увидеть детали определенного лица. Тогда шаблон заботится только о том, чтобы превратить эти объекты в структуру HTML и связать обратные вызовы.

Конструктивно что-то похожее на следующее произойдет в вашем шаблоне:

<div
    *ngFor="let face of faces; index as i"
    (click)="showFaceDetails(i)"
    [style.left.px]="face.x"
    [style.top.px]="face.y"
></div>