Question

在我的组件html中，使用过滤器显示基于当前年份的数据，它在加载时工作正常。如果我也推动或弹出更新html的变量，但我使用过滤器（管道）不更新html视图。 onSubmit将新数据值推送到项目（适当），它反映（更新html）如果没有使用过滤器。

data.component.ts

 constructor() {
        this.projects = (from service getting the data);
        var newDate = new Date();
        newDate.setDate(1);
        this.dateValue = newDate;
    }
onSubmit(data) {
   this.projects.push(data);
}

data.component.html

<ul class="list-group">
      <li *ngFor="let event of projects | yearFilter: dateValue" class="list-group-item">
        <span class="event_release">{{event.startDate | date: 'dd/MM/yyyy'}} </span><br />
        <strong>{{event.title}}</strong>
      </li>
    </ul>
    <ul class="list-group">
      <li *ngFor="let data of projects" class="list-group-item">
        <span class="event_release">{{data.startDate | date: 'dd/MM/yyyy'}} </span><br />
        <strong>{{data.title}}</strong>
      </li>
    </ul>

年-filter.pipe.ts

export class YearFilterPipe implements PipeTransform {
  transform(items: any[], args: any): any {
    return items.filter(item => {
        var startDate = new Date(item.startDate);
        var endDate = new Date(item.endDate);
        var realEndDate = new Date(item.realEndDate);
        return ((startDate.getFullYear()===args.getFullYear());
    });
  }
}

Answer 1

In your Pipe use this:

@Pipe({ name: 'yearFilter', pure: false })

Your need to set properties pure to false. By default is true.

双向绑定管道没有绑定在angular2

1 个答案: