angular8中addEventListener和排序项的问题

我试图通过单击列的标题在表中实现排序功能。它应该是这样工作的：第一次单击时，该列中的项目应该按升序排列，第二次单击时，项目应该按降序排列

以下是我的html代码：

<thead>
  <tr>
    <th (click)="sorting('FirstName')" class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Ime i prezime : activate to sort column ascending">
      First Name
    </th>                
    <th (click)="sorting('Email')" class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Email : activate to sort column ascending">
      Email
    </th>
    <th (click)="sorting('Username')" class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending">
      Username
    </th>                 
    <th>
      Actions
    </th>
  </tr>
</thead>   

---

我有一个问题-每次单击该函数都只调用一次，但调用了多次

const-handleClick

。当我第一次点击我的专栏时，在consthandleclick中什么也没有发生。当我第二次点击时，它只调用了一个。但当我第三次点击我的专栏时，它打了两次电话。如果我第十次点击我的专栏，它会调用handleClick九次。非常奇怪的行为。知道为什么会发生这种情况吗？

您不需要使用DOM

名字
电子邮件
用户名
行动

---

您不需要使用DOM

名字
电子邮件
用户名
行动

---

每次单击时都会添加事件侦听器，这就是为什么会出现这种行为。您应该做的是只添加一次事件侦听器。我会：1）从代码中删除所有

addEventListener

、所有

querySelector

、所有

classList

事件，2）使用Angular的事件绑定和Angular类绑定。@mbojko是对的，不要自己操作DOM。@mbojko，你能添加一个答案吗？李宣的答案是朝着正确的方向迈出的一步。你在每次点击时都添加了事件监听器，这就是为什么你会有这种行为。您应该做的是只添加一次事件侦听器。我会：1）从代码中删除所有

addEventListener

、所有

querySelector

、所有

classList

事件，2）使用Angular的事件绑定和Angular类绑定。@mbojko是对的，不要自己操作DOM。@mbojko，你能补充一个答案吗？李宣的答案是朝着正确的方向迈出的一步。现在的问题是，当我点击“名字”列时，所有其他列都得到了“排序asc”类。做得好，我非常感谢你和所有其他人。现在的问题是，当我点击“名字”列时，所有其他列都得到了“排序asc”类。做得好，我非常感谢你和所有其他人。

sorting(sortBy) {
  this.sortBy = sortBy;
  let tableHeaderItems = Array.from(document.querySelectorAll('.sorting'));

  const handleClick = (e) => {
    e.preventDefault();
    e.stopPropagation();
    console.log(e.currentTarget.classList);
    if (e.currentTarget.classList.contains('sorting_asc')) {
      e.currentTarget.classList.remove('sorting_asc');
      e.currentTarget.classList.add('sorting_desc');
      this.sortDirection = "desc";
    }
    else if (e.currentTarget.classList.contains('sorting_desc')) {
      e.currentTarget.classList.remove('sorting_desc');
      e.currentTarget.classList.add('sorting_asc');
      this.sortDirection = "asc";
    }
    else {
      tableHeaderItems.forEach(node => {
        node.classList.remove('sorting_asc');
        node.classList.remove('sorting_desc');
      });
      e.currentTarget.classList.add('sorting_asc');
      this.sortDirection = "asc";
    }
  }

  tableHeaderItems.forEach(node => {
    node.addEventListener('click', handleClick)
  });

  this.service.getAll(this.sortBy, this.sortDirection);
}

  sorting(sortBy) {
    this.sortBy = sortBy;
    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
    this.service.getAll(this.sortBy, this.sortDirection);
  }