구성 요소 변수가있는 각도 2 파이프 / 필터

이번 주와 다음 주 이벤트를 보여주는 앱이 있습니다. 주는 두 개의 버튼으로 전환됩니다. 현재 활성주의 이벤트 만 표시하는 필터 / 파이프가 필요합니다. 나는 Angular 1 에이 필터를 가지고 있었고 모든 것이 작동했지만 An 2에서는이 필터 작동을 얻을 수 없습니다. 코드 참조 :

    @Page({
    templateUrl: 'build/pages/lunches/lunches.html',
    providers: [LunchService, HTTP_PROVIDERS],
})

export class Lunches {
    weekDuration:number = 24 * 60 * 60 * 7 * 1000;
    timestampFix:number = 24 * 60 * 60 * 4 * 1000;

    currentWeekNumber:number = parseInt(new Date().getTime() / this.weekDuration);
    nextWeekNumber:number = this.currentWeekNumber + 1;
    activeWeekNumber:string = '2408';
    lunches:Array;
    activeLunches:Array;
    noData:boolean = true;

    constructor(private lunchService:LunchService) {
    }

    ngOnInit() {
        this.loadLunches();
    }

    loadLunches() {
        this.lunchService.getLunchList().subscribe(
            data => {
                var lunches = data;
                lunches.forEach((item, index) => {
                    lunches[index].date = new Date(item.date);
                });
                this.lunches = lunches;
                this.weekFilter();
            }
        );
    }

    weekFilter() {
        var activeLunches = [];
        this.lunches.forEach((item, index) => {
            var lunchDate = new Date(item.date).getTime() - this.timestampFix;
            console.log(this.currentWeekNumber, ' = ', parseInt(lunchDate / this.weekDuration));
            if (this.activeWeekNumber == parseInt(lunchDate / this.weekDuration)) {
                this.noData = false;
                activeLunches.push(item);
            }
        });
        this.activeLunches = activeLunches;
    }
}

주형:

<div padding>
    <ion-segment [(ngModel)]="activeWeekNumber" (click)="weekFilter()">
        <ion-segment-button value="{{currentWeekNumber}}" selected>
            This week
        </ion-segment-button>
        <ion-segment-button value="{{nextWeekNumber}}">
            Next
        </ion-segment-button>
    </ion-segment>
</div>
<ion-card *ngIf="noData">
    <ion-card-content>
        No lunches for this week.
    </ion-card-content>
</ion-card>
<ion-card *ngFor="#lunch of activeLunches">
    <ion-card-header>
        <h2>{{lunch.date | date: "E d. M."}}</h2>
    </ion-card-header>
</ion-card>

그것은 잘 작동하지 않는 실제 코드이며 나쁜 솔루션이라고 생각합니다. 나는 그것을 파이프로 쓰려고했지만 변수 noData에 액세스하고 변경할 수 없었습니다.

편집 : 의견에 따라이 솔루션을 사용하기로 결정했지만 activeWeekVariable이 변경 될 때마다 weekFilter 기능을 트리거하는 방법에 문제가 있습니다. 어떤 아이디어?