Angular 4-如何使管道在编程式值更改时触发（无键盘事件）

Question

这是我的第一个Angualr项目。 我正在更新元素单击上的输入值。 当此值更改时，我想触发过滤管道。 触发管道的逻辑在指令中。 这可能吗？

零件

<input id="filter-careers" placeholder="type your title here" type="text" [(ngModel)]="term" value="">

 <div class="vacancy {{vacancy.department}}" *ngFor="let vacancy of vacancies | filter:term"
       (click)="openModalContent(vacancy.description, vacancy.positionTitle, vacancy.department, vacancy.link)">
      <p>{{vacancy.positionTitle }}</p>
  </div>

第二部分

<div class="department" *ngFor="let department of departments" appDepartmentsDirective [departmentName]="department.name" >

      <div class="icon" [ngStyle]="{background: 'url(' + '../../assets/' + department.link + '.png' + ') center center no-repeat'}">
        <img src="../../assets/{{department.link}}.svg" />
      </div>
    </div>

指示

import { Directive, HostListener, Input  } from '@angular/core';

@Directive({
  selector: '[appDepartmentsDirective]'
})

export class DepartmentsDirectiveDirective {

  @Input() departmentName:string;

  constructor() { }



  @HostListener('click') click() {
    console.log('department name: ' + this.departmentName);
    if((<HTMLInputElement>document.getElementById('filter-careers'))){
      console.log('do something here to trigger the filtering');

      (<HTMLInputElement>document.getElementById('filter-careers')).value = this.departmentName;
      (<HTMLInputElement>document.getElementById('filter-careers')).focus();

    }
    else{
      console.log('do something else');
    }

  }

}

Answer 1

默认情况下，仅在传递的值或参数更改时才重新执行管道。 如果值或参数是对象，则仅将不同的对象实例识别为更改，无法识别从数组中添加/删除值或修改对象的属性。

如果使管道不纯净，则每次运行更改检测都会执行该管道。 这可能会导致严重的性能问题。

一个简单的技巧是将其他参数传递给管道，例如

*ngFor="let vacancy of vacancies | filter:term:dummy"

并在每次您希望重新执行管道时，修改dummy

dummy:number = 0;

someHandler() {
  this.vacancies.push(someValue);
  this.dummy++;
}