Получение указанного элемента c DOM в компоненте angular с помощью щелчка HostListener из массива - PullRequest
Новая
       86

Получение указанного элемента c DOM в компоненте angular с помощью щелчка HostListener из массива

0 голосов
/ 07 мая 2020

Это немного сложнее объяснить, но я сделаю все возможное.

У меня есть компонент под названием feed, и компонент, который он ожидает, представляет собой массив (каналы) объектов (канал). У меня есть шаблон, в котором я отображаю все каналы, и способ их создания - с помощью ngFor.

Например, он создает контейнеры div для каждого из них индивидуально.

В основном я пытаюсь определить конкретный c канал, на который я нажал, а не все они с этим классом контейнера каналов ... Потому что, конечно, он разделяется в зависимости от того, сколько элементов канала у нас есть в массиве.

Проблема, с которой я столкнулся, заключается в том, что я хочу иметь возможность щелкнуть один (1) канал и что-то записать в консоли. Как я достигаю этого, создавая это: 

@HostListener('click', ['$event'])
  feedClickEvent(event: any) {
    console.log(event);
    this.feedListModel.map((feedItem, index) => {
      const x = document.getElementsByClassName(index.toString());

      if (x[0].id === feedItem.id) {
        //console.log("I`m triggered ", feedItem.id);
      }
    });
  }

Однако я хотел бы получить текущий идентификатор div, на который щелкнули, но я точно не знаю, как, я пробовал много разных сценариев ios но они не работали.

feedListModel является входом для компонента с массивом объектов, и на основе этого я создаю отдельные блоки div (каналы).

Вот шаблон HTML: 

<div class="container">
    <div class="row feed-container" id="{{feedItem.id}}" *ngFor="let feedItem of feedListModel; let i = index">
        <div class="feed-item {{i}}" id="{{feedItem.id}}">
            <div class="col-sm-4 column-inlineBlock feed-avatar">
                <span>
                    <k-icon [icon]=" { type: 'image', src: 'someUrlPhoto', extraClass: 'feed-icon'}"></k-icon>
                </span>
            </div>
            <div class="col-sm-7 column-inlineBlock main-feed-content">
                <div class="title"><strong>{{feedItem.secondColumn.title}}</strong></div>
                <div class="description">{{feedItem.secondColumn.description}}</div>
                <div class="footer" *ngIf="!feedItem.secondColumn.footer.isTimeAgo">{{feedItem.secondColumn.footer.value}}</div>
                <div class="footer time-ago" *ngIf="feedItem.secondColumn.footer.isTimeAgo">
                    <k-icon [icon]="{type: 'fas', name: feedItem.secondColumn.footer.icon.icon, extraClass: 'icon-clock'}"></k-icon>
                    {{feedItem.secondColumn.value | timeAgo}}
                </div>
            </div>
            <div class="col-sm-1 column-inlineBlock third-col" *ngIf="!isTwoColumn">
                <div class="third-col-wrapper">
                    <span class="icon-indicator {{feedItem.thirdColumn.status}}">
                        <k-icon [icon]="{type: 'fas', name: feedItem.thirdColumn.kIcon.icon, extraClass: 'icon-number'}"></k-icon>
                </span>
                <span class="number-indicator">
                    <strong id="value-indicator">{{feedItem.thirdColumn.value}}</strong>
                </span>
                </div>
            </div>
        </div>
    </div>
</div>

Например, в hostlistener i console записывается событие event.currentTarget, и я получаю 2 div, хотя я щелкнул по первому div (подача). Другими словами, есть 2 канала. И мне нужен щелчок только с идентификатором, чтобы я мог что-то с ним сделать.

enter image description here

1 Ответ

1 голос
/ 07 мая 2020

Если я понял, вам просто нужно привязать событие щелчка к элементу в шаблоне и добавить метод в компонент, чтобы делать то, что вы хотите:

в шаблоне: 

<div class="container">
    <div class="row feed-container" (click)="select(feedItem)" id="{{feedItem.id}}" *ngFor="let feedItem of feedListModel; let i = index">
         ...
    </div>
</div>

в компоненте: 

public select(feedItem: any) {
    // your logic here
}
...