Angular 2 Search

Question

Я пытаюсь использовать окно поиска, чтобы отфильтровать список элементов, используя Angular 2, но когда я ввожу материал в окно поиска, он никогда не запускает метод поиска в службе. Я знаю, что я, вероятно, пропустил что-то простое, но любая помощь была бы высоко оценена.

company.service.ts:

import { Injectable } from '@angular/core'; 
import { Headers, Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

import 'rxjs/add/operator/toPromise'; 

import { CompanyModel } from './company'; 
import { CompaniesModel } from './company'; 

@Injectable() 
export class CompanyService { 

    private headers = new Headers({'Content-Type': 'application/json'}); 

    constructor(private http: Http) { } 

    search(term: string): Observable<CompaniesModel> { 
     console.log('search service', term); 
     return this.http 
      .get('/api/Company/Search/?search=' + term) 
      .map((r: Response) => r.json().data as CompaniesModel); 
    } 
} 

companies.component.ts:

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 
import { FormControl } from '@angular/forms'; 

import { CompanyModel } from './company'; 
import { CompaniesModel } from './company'; 
import { CompanyService } from './company.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'companies-list', 
    templateUrl: 'companies.component.html' 
}) 
export class CompaniesComponent implements OnInit { 
    companiesModel: Observable<CompaniesModel>; 
    private searchTerms = new Subject<string>(); 

    constructor(
     private companyService: CompanyService, 
    private router: Router) { } 

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

    ngOnInit(): void { 
     this.companiesModel = this.searchTerms 
      .debounceTime(300) 
      .distinctUntilChanged() 
      .switchMap(term => this.companyService.search(term)); 

    } 

    gotoDetail(company: CompanyModel): void { 
     let link = ['/company', company.Id]; 
     this.router.navigate(link); 
    } 
} 

companies.component.html

<h2>Companies</h2> 
<div> 
    <label>Search: </label> 
    <input #searchBox id="search-box" (keyup)="search(searchBox.value)" /> 
</div> 
<div> 
    <button (click)="create()"> 
     Add 
    </button> 
</div> 
<div *ngIf="companiesModel" class="grid grid-pad"> 
    <ul> 
     <li *ngFor="let company of companiesModel.Companies | async" (click)="gotoDetail(company)"> 
      <div> 
       <h4>{{company.Name}}</h4> 
      </div> 
     </li> 
    </ul> 
</div> 

Answer 1

Вы никогда не подписываетесь на эту тему searchTerms. Если вы не подписаны, операторы, которые вы выложили, никогда не будут выполнены.

this.searchTerms 
     .debounceTime(300) 
     .distinctUntilChanged() 
     .switchMap(term => this.companyService.search(term)) 
     .subscribe((val) => //do something with the result here); 

Пример Jsbin. Добавьте оператор subscribe, чтобы просмотреть журналы консоли. http://jsbin.com/zijuvet/edit?html,js,console

Answer 2

Вы можете попробовать то же самое, используя ниже код, а

<input type="text" [(ngModel)]="queryString" id="search" placeholder="Search to type"> 

Труба

@Pipe({ 
    name: 'FilterPipe', 
}) 
export class FilterPipe implements PipeTransform { 
    transform(value: any, input: string) { 
     if (input) { 
      input = input.toLowerCase(); 
      return value.filter(function (el: any) { 
       return el.toLowerCase().indexOf(input) > -1; 
      }) 
     } 
     return value; 
    } 
} 

Вы можете изменить код в соответствии с вашими требованиями.

More info

Answer 3

Angular2 поиск без каких-либо пользовательских труб

<table> 
<thead>...</thead> 
<tbody> 
     <tr *ngFor="let part of filterParts let i=index"></tr> 
</tboby> 

// код в component.ts файл

Partsfiltering(inputName){ 
     this.filterParts = []; 
     if(inputName != ""){ 
      this.parts.forEach(element => {   
     if(element.partNumber.toUpperCase().indexOf(inputName.toUpperCase())>=0){ 
        this.filterParts.push(element); 
       } 
      }); 
     }else{ 
     this.filterParts = this.parts; 
     } 
    }