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

默認情況下將t，只有當傳遞的值或參數改變時纔會重新執行管道。如果值或參數是對象，則只有不同的對象實例會被識別爲更改，不會識別添加/刪除數組中的值或修改對象的屬性。

如果使管道不純，它會在每次運行更改檢測時執行。這可能會導致嚴重的性能問題。

一個簡單的竅門是通過一個額外的參數來管像

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

，並要重新執行管每次修改dummy

dummy:number = 0; 

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