时间戳

首页 > 解决方案 > addEventListener 和 angular8 中的项目排序问题

angular - addEventListener 和 angular8 中的项目排序问题

问题描述

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

这是我在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>

这是我在打字稿文件中的代码：

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

我有问题 - 每次点击该功能只是一次，但const handleClick被多次调用。当我第一次单击我的列时，const handleClick 内没有任何反应。当我第二次点击时，它只调用了一个。但是当我第三次点击我的专栏时，它调用了两次。如果我第十次单击我的列，它将调用 handleClick 九次。非常奇怪的行为。知道为什么会这样吗？

标签： angulartypescriptaddeventlistenerangular8

解决方案

你不需要使用 DOM。


<thead>
  <tr>
    <th (click)="sorting('FirstName')"
      class="sorting"
      [ngClass]="sortBy === 'FirstName' ? { 'sorting_asc': sortDirection === 'asc', 'sorting_desc':  sortDirection === 'desc' } : null">
      First Name
    </th>
    <th (click)="sorting('Email')"
      class="sorting"
      [ngClass]="sortBy === 'Email' ? { 'sorting_asc': sortDirection === 'asc', 'sorting_desc':  sortDirection === 'desc' } : null">
      Email
    </th>
    <th (click)="sorting('Username')"
      class="sorting"
      [ngClass]="sortBy === 'sorting' ? { 'sorting_asc': sortDirection === 'asc', 'sorting_desc':  sortDirection === 'desc' } : null">
      Username
    </th>
    <th>
      Actions
    </th>
  </tr>
</thead>

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

推荐阅读