angular - Angular 2 コンポーネントでバインディングが機能しない

Question

こんにちは、Angular 2 を使用して並べ替え機能を備えた単純なグリッドを作成しようとしています。以下はコンポーネントの構造です。

import {Component, Pipe} from 'angular2/core';
import {NgClass} from 'angular2/common';

    @Component({
        selector: "sorter",
        template: `
            <i class="indicator glyphicon glyphicon glyphicon-sort-by-alphabet"  [ngClass]="{'glyphicon-sort-by-alphabet-alt': isReverse}"></i>
            <span>{{isReverse}}</span>
        `,
        directives: [NgClass]
    })
    export class Sorter {
        isReverse = true;
        public sortData(key) {
            this.isReverse = !this.isReverse;
            console.log("Directection-->" + this.isReverse);
        }

    }

var isReverse を作成し、それを sortData() メソッドで変更しました。console.log() は、列ヘッダーをクリックすると正しい値を出力しますが、テンプレートには影響しません。ここで何が問題なのかわかりません。

ありがとう