_ _

ngOnInit() {
    this.appService.getData().subscribe(res => {
       this.users = res;
       console.log(this.users); 
    });
  }

Rx.Observable.of(value)
создает поток, который содержит одно событие с value. Это совсем не про изменения.
От шаблона, который вы хотите применить, в Angular2 уходят, в сторону реактивности.

У компонентов в Angular2 есть input-свойства, изменения которых можно отслеживать с помощью life-cycle callback, конкретно интерфейс OnChanges. Выглядеть будет примерно так:

@Component({selector: 'my-component', template: '<span>{{text}}</span>'}}
class MyComponent implements OnChanges {
  public text: string;
  @Input() changeMe: string;
  
  ngOnChanges(changes) {
    this.text = Date.now().toString();
  }
}

Предположим, что в компоненте верхнего уровня у вас есть:

<my-component [changeMe]="someValue"></my-component>

Изменяя someValue вы изменяете input-атрибут changeMe компонента MyComponent. При каждом изменении будет срабатывать ngOnChanges.
Еще одно замечание - если в качестве значения вы передаете объект, то не надо его мутировать. Создавайте новый объект и присваивайте заново.

this.someValue = {value: 1, anotherValue: 2};
this.someValue = Object.assign({}, this.someValue, {value: 2}); // {value: 2, anotherValue: 2} // Но тут this.someValue это ссылка уже на другой объект.

Вариант 1 - сделать вспомогательное поле, в котором хранить подготовленное для сортировки значение

Вариант 2 - инициализировать таблицу с getData, в котором крутить данные каким угодно способом исходя из переданных параметров, сортировок и.т.д.
ng-table.com/#/loading/demo-external-array

UPD.

.then(function (response) {
                    params.total(response.total);
                    $scope.users = response.data;
                    return response.data.map(function(u) { 
                      u.sortName = u.userName.toLowerCase();
                      return u; // Это вот забыли   
                    });
                });

@Component({
  selector: 'mouse-hover-test',
  template: '<div [class.hovered]="hovered"></div>"'
})
class MouseHoverTestCmp {
  public hovered: boolean;
  @HostListener('mouseover') onMouseOver() {
    this.hovered = true; 
  }
  @HostListener('mouseout') onMouseOut() {
    this.hovered = false; 
  }
}

А если реюзабельности захочется:

@Directive({
  selector: '[hoverClass]'
})
class HoverClassCmp { 
  @Input('hoverClass') className: string;
  @HostBinding('class') activeClass: string;
  @HostListener('mouseover') onMouseOver() {
    this.activeClass = this.className;
  }
  @HostListener('mouseout') onMouseOut() {
    this.activeClass = ''; 
  }
}

Хук ngAfterViewChecked на компоненте

Потому что это не PHP (let _period = [];). Для ассоциативных массивов используйте Object ({}) или Map

$animateProvider.classNameFilter позволяет задать фильтр по строке классов элемента. Обрабатываться ngAnimate будут только элементы проходящие фильтр.