管道的两种方式绑定未在 angular2 中绑定

Question

In my component html displaying the data based on the current year using the filter, it works fine on load. If i do push or pop on the variable updating the html also, but i use filter (pipe) not updating the html view. onSubmit pushing the new data value to the projects (appropriate), it's reflecting (updating the html) If didn't use filter.

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>

year-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.