Angular 2 - (keyup) ne fonctionne pas - Tour des héros

Question

Je fais une visite guidée des héros et dans mon projet (keyup) l'événement ne fonctionne pas.

Lorsque je saisis la première lettre angulaire envoie une demande et après que les presses suivantes n'envoient pas. Je vois les résultats des demandes dans la console du navigateur.

<div id="search-component"> 
<h4>Search products</h4> 
<input #searchBox id="search-box" (keyup)="search(searchBox.value)"/> 
<div> 
    <div *ngFor="let product of products | async" (click)="gotoDetail(product)" class="search-result"> 
     {{product.name}} 
    </div> 
</div> 

@Component({ 
    selector: 'product-search', 
    templateUrl: './product-search.component.html', 
    styleUrls: [ './product-search.component.css' ], 
    providers: [ ProductSearchService ] 
}) 
export class ProductSearchComponent implements OnInit { 

    projects: Observable<Product[]>; 
    private searchTerms = new Subject<string>(); 

    constructor(
     private productSearchService: ProductSearchService, 
     private router: Router 
    ) {} 

    search(term: string): void { 
     this.searchTerms.next(term); 
    } 

    ngOnInit(): void { 
     this.products = this.searchTerms 
      .debounceTime(300) 
      .distinctUntilChanged() 
      .switchMap(
       term => term ? 
       this.productSearchService.search(term) : 
       Observable.of<Product[]>([]) 
      ) 
      .catch(error => { 
       console.log(error); 
       return Observable.of<Product[]>([]); 
      }) 
    } 

    gotoDetail(product: Product): void { 
     const link = ['/detail', product.id]; 
     this.router.navigate(link); 
    } 

} 

Answer 1

ensemble cela comme dans votre html

// HTML

<input [(ngModel)]="searchBox" id="search-box" (keyup)="search(event)"/> 

// Compoenet

searchBox: string // avant constructeur dans déclarer votre composant

// déclarer après le constructeur dans votre composant

@HostListener('document:keyup', ['$event']) 
    search(event: KeyboardEvent): void { 
     this.searchTerms.next(this.searchBox); 
    } 

Answer 2

Parce que votre variable searchBox est en fait un ViewChild de votre composant.

Essayez d'utiliser ceci:

<input [(ngModel)]="searchBox" id="search-box" (keyup)="search(searchBox)"/>