角2搜索

Question

我试图使用一个搜索框来过滤一个使用角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。添加订阅语句以查看控制台日志。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;
    }
}

您可以根据您的需求修改代码。

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;
      }
     }