Блог

 <tr *ngFor="let data of rawDataListDup | filter:searchText | paginate: { itemsPerPage: 100,currentPage: q }; let idx = index">
<td>
  <select (change)="AssigneeChange(data,$event.target.value,idx)">
   <option [value]="data1.id" *ngFor="let data1 of groupList">{{ data1.name }}</option>
  </select>
</td>
</tr>
 

Рассматривайте rawDataListDup элементы как 300 . В приведенном выше коде idx значение сбрасывается на 0, когда я перехожу на следующую страницу в таблице.

 AssigneeChange(data,id,idx){
  console.log(data,id,idx)
}
 

Рассмотрим текущий индекс rawDataListDup as 100 . В консоли я получаю idx = 0 вместо idx = 100 того, когда AssigneeChange вызывается функция. Это происходит, когда я нахожусь в page = 2 таблице. На каждой странице будет 100 элементов.

Как решить эту проблему?

 <tr *ngFor="let data of rawDataListDup 
   | filter:searchText 
   | paginate: { itemsPerPage: 100,currentPage: q }; 
   let idx = index   paginate.currentPage  * paginate.itemsPerPage;
">
 

добавьте для индексации кратное между pageSize и itemsPerPage .

пример:

 page 0: item 0 = 0   0 * 10 = 0
page 0: item 1 = 1   0 * 10 = 1
page 1: item 0 = 0   1 * 10 = 10
page 1: item 1 = 1   1 * 10 = 11
 

передайте «q» вместо «idx» для назначения функции изменения.

Пожалуйста, обратитесь к этому для решения..

Мы можем получить абсолютный индекс, используя приведенный ниже код, поскольку paginate его не распознает.

 AssigneeChange(data,id,idx){ 
idx = 100 * (this.q - 1)   idx;
console.log(data,id,idx)
}
 

Решение: использование indexOf() метода для получения индекса элемента в цикле.

 <tr *ngFor="let data of rawDataListDup | filter:searchText | paginate: { itemsPerPage: 100,currentPage: q };>
  <td>
    <select (change)="AssigneeChange(data,$event.target.value, rawDataListDup.indexOf(data)">
      <option [value]="data1.id" *ngFor="let data1 of groupList">{{ data1.name }}</option>
    </select>
  </td>
</tr>