- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我已经学习了 Angular 2 英雄教程,目前处于这个阶段:
https://angular.io/docs/ts/latest/tutorial/toh-pt6.html
我可以在搜索栏中搜索,然后出现一个英雄名称建议列表
笨蛋:https://angular.io/resources/live-examples/toh-6/ts/eplnkr.html
但是,我想要的是一个过滤栏,我可以在其中搜索,并且根据过滤栏中的内容自动过滤英雄 block 。
例如,在我提供的链接中,如果我在搜索栏中输入“Bo”,我只希望英雄方 block “Bombasto”出现在屏幕上。当我清除搜索栏时,所有 block 都应该重新出现。有人知道怎么做吗?
最佳答案
看看我修改过的plunker:https://plnkr.co/edit/YHzyzm6ZXt4ESr76mNuB?p=preview
管道
@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);
}
}
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 { }
关于Angular 2 英雄之旅 : Filter heroes by name,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41282926/
我是docker的新手,我正在尝试将Angular示例项目“Tour of heros”进行docker化,您可以在这里找到: https://angular.io/generated/zips/to
当我点击“结束游览”按钮时,我无法再次开始 Bootstrap 游览。我搜索了所有 documentation ,但我还没有找到解决方案。 最佳答案 也试试 tour.restart()。我刚刚问了同
我正在浏览Tour C++中的Aliases模板。我不明白下面的代码以及如何使用它? template class Vector { public: using value_type = T;
我已经实现了intro.js到我的网站。但我只想在第一次访问时开始旅行。可能是通过使用cookie..网站是用html而不是php制作的.. 最佳答案 JavaScript cookie 是一种解决方
我想使用Knockout.js与 Bootstrap Tour 。特别是,我想将一些数据绑定(bind)点击处理程序附加到游览步骤中的按钮。 我创建了一个像这样的简单游览: var tour = ne
我正在学习着名的 Angular 教程,英雄之旅,但我正在努力迈出一步。 关于 sixth course, HTTP ,我们正在使用一种工具来模拟对 API 的 API 调用。 我想我遵循了所有步骤,
我正在做 Go 之旅,这部分是“slice 就像对数组的引用”。我根本没有更改此代码,所以我很好奇为什么它会耗尽内存。 最佳答案 不应该崩溃,可能是旅游网站有一段时间出了问题......目前任何方式,
A Tour of Go #23 : package main import ( "fmt" "math" ) func pow(x, n, lim float64) float64
无法将其分解为更小的示例...所以我使用 std::multimap 来存储一些值...这是一个简单的多项式类。 问题是最后一个函数,它将两个多项式相乘。当它与它们相乘时,它会产生一个具有多项式的多项
环境:Angular 5+ 来源:https://angular.io/tutorial 在 heroes.component.ts 类中有一个带冒号的赋值,如下所示: export class He
代码 let interestingNumbers = [ "Prime": [2, 3, 5, 7, 11, 13], "Fibonacci": [1, 1, 2, 3, 5, 8]
在 Bootstrap 演练中,我们有下一个和上一个按钮。在此点击下一步按钮,我们进入下一步。 但我想添加条件,如果该输入字段为空,则演练不应移至下一步,它应仅停留在当前步骤。 引用代码如下: rec
我是一名优秀的程序员,十分优秀!