Доброго времени суток! Делаю поиск на angular что-то не выходит помогите разобраться.
app.component.html:
<div class="container master">
<div class="row">
<img src="../logo.png" alt="logo">
</div>
<div class="row col-xs-10">
<input type="text"
class="form-control"
[(ngModel)]="queryString"
placeholder="type phone number/name to find...">
</div>
<div class="row col-xs-12">
<table class="table">
<thead>
<th>id</th>
<th>number</th>
<th>owner</th>
</thead>
<tbody>
<tr *ngFor="let phone of phones | FilterPipe: queryString">
<td>{{ phone.id }}</td>
<td>{{ phone.number }}</td>
<td>{{ phone.owner }}</td>
</tr>
</tbody>
</table>
</div>
</div>
app.component.ts:
import { Component } from '@angular/core';
import { FilterPipe } from './pipes';
export class Phone {
id: string;
number: string;
owner: string;
}
const phoneList: Phone[] = [
{ id: 1, number: '200', owner: 'Соколов Николай' },
{ id: 2, number: '225', owner: 'Петров Петр' },
{ id: 3, number: '200', owner: 'Иванов Иван' }
];
@Component({
selector: 'pb',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Phone Book';
phones = phoneList;
}
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { FilterPipe } from './pipes'
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
FilterPipe
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
pipes.ts:
import { Pipe, PipeTransform } from '@angular/core';
@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;
}
}