Я пытаюсь реализовать простой поиск с использованием каналов. Я действительно новичок в концепциях pipe и angular2, поэтому мне нужна ваша помощь.
вот мой html:
<input type="textarea" placeholder="branch" [(ngModel)]="search.branch" name="branch">
<tr *ngFor="let loan of loans | loanfilter:search.branch ">
<td><input type="checkbox"></td>
<td>{{loan.loanId}}</td>
<td>{{loan.custName}}</td>
<td>{{loan.vehicleNum}}</td>
<td>{{loan.TC}}</td>
<td>{{loan.RE}}</td>
</tr>
кредит.компонент.тс:
import { Component } from '@angular/core';
import { LoanService } from '../../services/loans.service';
import { Loan } from '../../../loan';
import { Injectable, Pipe, PipeTransform } from '@angular/core';
import { LoanFilterPipe } from '../../pipes/loan.pipe';
@Component({
moduleId: module.id,
selector: 'loans',
templateUrl: './loans.component.html',
providers: [LoanService],
declarations: [LoanFilterPipe] //getting error on this line: Object literal may only specify known properties, and 'declarations' does not exist in type 'Component'.
})
export class LoansComponent{
loans : Loan[];
custName: any;
constructor(private loanService: LoanService){
this.getloans();
};
getloans(){
this.loanService.getLoan()
.subscribe(loans => {
this.loans = loans;
console.log(loans);
});
}
};
ошибки, которые я получаю:
Uncaught (в обещании): ошибка: ошибки синтаксического анализа шаблона: невозможно привязать к «ngModel», так как это не известное свойство «ввода»
кредит.труба.тс:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'loanfilter'
})
export class LoanFilterPipe implements PipeTransform{
transform(loans: any[], args: any): any{
return loans.filter(item => item.title.indexOf(args[0].title) !== -1);
}
}
Я также использовал файл module.ts для объявления канала и всех других компонентов:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { LoansComponent } from './components/loans/loans.component';
import { LoanFilterPipe } from './pipes/loan.pipe';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent, LoansComponent, LoanFilterPipe ],
bootstrap: [ AppComponent ],
exports: [LoanFilterPipe]
})
export class AppModule { }