角2 - （キーアップ）が動作しない - 英雄のツアー

Question

私はヒーローのチュートリアルツアーを行い、私のプロジェクト（キーアップ）イベントでは機能しません。

最初の文字を入力すると角度が要求を送信し、次の印刷が送信していない場合は、ブラウザのコンソールでリクエストの結果が表示されます。

<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

セットをあなたのhtmlに

// HTML

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

// Compoenet

searchBox: stringは//あなたがplunkerを提供することができ、あなたのコンポーネント

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

Answer 2

あなたsearchBox変数は、実際にあなたのコンポーネントのViewChildですので。

この代わりに使用してみてください：このような

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