Проблема с addEventListener и сортировкой элементов в angular8 - PullRequest
Новая
       31

Проблема с addEventListener и сортировкой элементов в angular8

0 голосов
/ 08 октября 2019

Я попытался реализовать функцию сортировки в моей таблице, нажав на заголовок столбца. Это должно работать следующим образом: при первом нажатии элементы в этом столбце должны быть в порядке возрастания, при втором нажатии элементы должны быть в порядке убывания.

Вот мой код в формате 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 девять раз. Очень странное поведение. Есть идеи, почему это происходит?

1 Ответ

2 голосов
/ 08 октября 2019

Вам не нужно использовать 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);
  }
...