Angular 2管道/过滤器，组件变量

Question

我有显示本周和下周事件的应用程序。 周通过两个按钮切换。 我需要仅显示当前活动周中事件的过滤器/管道。 我在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函数时出现问题。 有任何想法吗？

Answer 1

何时收到通知

activeWeekNumber:string = '2408';

变化有不同的方式。

• 您可以将字段更改为getter / setter

_activeWeekNumber:string = '2408';
get activeWeekNumber():string {
  return this._activeWeekNumber;
}
set activeWeekNumber(value:string) {
  this._activeWeekNumber = value;
}

• 或使用ngModel中的事件

<ion-segment [(ngModel)]="activeWeekNumber" (ngModelChange)="doSomething($event) (click)="weekFilter()"