Angular 2 Tour of Heroes：按名称过滤英雄

Posted 2023-03-13

【中文标题】Angular 2 Tour of Heroes：按名称过滤英雄

【英文标题】：Angular 2 Tour of Heroes: Filter heroes by name

【发布时间】：2017-05-08 01:35:30

【问题描述】：

我已经关注了 Angular 2 英雄之旅教程，我目前处于这个阶段：

https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

我可以在搜索栏中搜索，出现英雄名称建议列表

Plunker：https://angular.io/resources/live-examples/toh-6/ts/eplnkr.html

但是，我想要的是一个过滤栏，我在其中搜索，并且根据过滤栏中的内容自动过滤英雄块。

例如，在我提供的链接中，如果我在搜索栏中输入“Bo”，我只希望英雄块“Bombasto”出现在屏幕上。当我清除搜索栏时，所有块都应该重新出现。有人知道怎么做吗？

【问题讨论】：

也许你可以创建一个最小的 plunker？

在我提供的链接中有一个 plunker（朝向底部）。

我真的应该将它添加到帖子中。给你angular.io/resources/live-examples/toh-6/ts/eplnkr.html

这可能对你有帮助：***.com/a/34165371/5115768 基本上你创建了一个custom pipe，它根据搜索字符串过滤你的heroes 数组（在名为filterargs 的答案中）

所以您希望仪表板组件中显示的英雄根据搜索框中的内容进行更改？

【参考方案1】：

看看我修改后的 plunker：https://plnkr.co/edit/YHzyzm6ZXt4ESr76mNuB?p=preview

在dashboard.component.ts 中添加了Pipe

@Pipe(
  name: 'filterHeros'
)
export class FilterHeroPipe 
  public transform(heros: Hero[], filter: string) 
    if (!heros || !heros.length) return [];
    if (!filter) return heros;
    return heros.filter(h => h.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0);
  

在dashboard.template中使用Pipe

<h3>Top Heroes</h3>
<div class="grid grid-pad">
  <a *ngFor="let hero of (heroes | filterHeros : heroSearch.curSearch )"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
    <div class="module hero">
      <h4>hero.name</h4>
    </div>
  </a>
</div>
<br />
<hero-search #heroSearch></hero-search>

更改 HeroSearch 组件：

  private searchTerms = new Subject<string>();
  public curSearch: string; // !! NEW !!

  constructor(
    private heroSearchService: HeroSearchService,
    private router: Router) 

  // Push a search term into the observable stream.
  search(term: string): void 
    this.curSearch = term;  // !! NEW !!
    this.searchTerms.next(term);
  

别忘了将我们的Pipe 添加到我们的app.module：

import  DashboardComponent, FilterHeroPipe    from './dashboard.component';
import  HeroesComponent       from './heroes.component';
import  HeroDetailComponent   from './hero-detail.component';
import  HeroService           from './hero.service';
import  HeroSearchComponent   from './hero-search.component';

@NgModule(
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent,
    HeroSearchComponent,
    FilterHeroPipe
  ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
)
export class AppModule