在Angular组件中使用点击HostListener从一个数组中获取特定的DOM元素。

Question

这有点难以解释，但我会尽我所能。

我有一个叫做feed的组件，这个组件需要一个数组(feeds)的对象(feed)，我有一个模板，可以显示所有的feeds，我创建它们的方式是使用ngFor。我有一个模板来显示所有的feeds，我创建它们的方式是使用ngFor。

例如，它为它们中的每一个单独创建div容器。

基本上，我试图识别我点击的特定feed，而不是所有的feed-container类......因为当然，它是共享的，基于我们在数组中有多少feed项目。

我所面临的问题是，我希望能够点击一个(1)feed，然后控制台记录一些东西。我如何实现这一点是通过创建这个。

@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 id，但我不知道具体怎么做，我试过很多不同的方案，但都不成功。

feedListModel是输入给组件的对象数组，基于这个数组我创建了各个div（feeds）。

这里是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中，我控制台记录了event.currentTarget，我得到了2个divs，即使我点击了第一个div(feed)。换句话说，有2个feeds。而我只需要被点击的那个ID，这样我就可以对它做一些事情。

Answer 1

如果我理解，你只需要在模板中的元素上绑定一个点击事件，然后在组件中添加一个方法来做你想要的事情。

在模板中：

<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
}