2016-08-26 3 views
2

То, что я пытаюсь добиться, чтобы отсортировать массив users по выбору пользователя, и разделить результат на судоходные страницы 20.Как запустить несколько прикованных, переменные зависимые, трубы в угловом 2

Моих шаблон имеет таблицу, которая выглядит следующим образом

<table> 
    <thead>...</thead> 
    <tbody> 
      <tr 
       *ngFor="let theUser of users | sort: [ sortField, sortAscending ] | paginate: [ pageNumber-1, pageSize ] "> 
       <td>{{theUser.id}}</td> 
       <td>{{theUser.attribute0}}</td> 
       <td>{{theUser.attribute1}}</td> 
       <td>{{theUser.attribute2}}</td> 
      </tr> 
     </tbody> 
    </table> 

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

компонент изменяет переменные sortField и sortAscending в функции, связанной с щелчками на клетках таблицы заголовков, которая вызывает эту функцию, основанную на щелкнул клетки:

sortUsers(field:string): void{ 
    if(this.sortField==field){ 
     this.sortAscending=!this.sortAscending; 
    }else{ 
     this.sortAscending=true; 
     this.sortField=field; 
    } 
    this.detector.detectChanges(); 
    } 

Где detector является впрыскивается экземпляр ChangeDetectorRef. Кроме того, pageNumber привязан к счетчику с [(ngModel)].

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

EDIT: Я работал вокруг этого конкретного случая приращением pageNumber, называя detectChanges, затем декремента его и вызывая detectChanges снова. Я все еще хотел бы знать, как решить общий случай.

EDIT2:Plunker here, связанные с bug report here

ответ

1

Как отмечено в сообщении об ошибке, проблема в том, что мой род был вывод ссылки на исходный массив. Поскольку ссылка не менялась, обнаружение изменений интерпретировало вывод как неизменный.

VICB Пользователь в GitHub предложил следующие решения:

  • Возвращает новый массив.
    • Это правильное решение для данного конкретного случая использования. Выходной сигнал sort каждый раз должен представлять собой значительно различный массив, поэтому изменение значения параметра ref каждый раз имеет смысл и связывает изменение с обнаружением изменений Angular2.
  • Отметьте трубы как нечистые.
    • Это может привести к тому, что paginate будет запускаться каждый раунд обнаружения изменений, то есть каждое нажатие клавиши или движение мыши. Может быть приемлемым, но требует больше процессорных циклов, чем выше.
  • Включите обнаружение изменений вручную на сортировку/paginate.
Смежные вопросы