Ошибка синтаксического анализа шаблона angular2 pipe

Я пытаюсь реализовать простой поиск с использованием каналов. Я действительно новичок в концепциях 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 { }

person hemanth koganti    schedule 12.01.2017    source источник


Ответы (3)


Импортируйте FormsModule в свой модуль приложения.

import { NgModule }      from '@angular/core';
import { FormsModule }   from '@angular/forms';
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, FormsModule ],
  declarations: [ AppComponent, LoansComponent, LoanFilterPipe ],
  bootstrap:    [ AppComponent ],
  exports:      [LoanFilterPipe]
})

export class AppModule { }
person ranakrunal9    schedule 12.01.2017
comment
теперь получаю другую ошибку TypeError: Cannot read property 'branch' of undefined - person hemanth koganti; 12.01.2017
comment
вам нужно определить public search:any={ branch:''} внутри вашего LoansComponent - person ranakrunal9; 12.01.2017
comment
теперь получаю эту ошибку: Cannot read property 'filter' of undefined - person hemanth koganti; 12.01.2017
comment
Попробуйте вставить if(!loans || !args) return; в качестве первой строки в функцию transform() внутри LoanFilterPipe - person ranakrunal9; 12.01.2017
comment
получаю эту ошибку: Cannot read property 'indexOf' of undefined - person hemanth koganti; 12.01.2017

вам не хватает FormsModule в вашем коде

потому что в соответствии с angular FormsModule необходимо добавить во время начальной загрузки, если вы используете ngModel, потому что на данный момент ngModel является частью FormModule

person Pardeep Jain    schedule 12.01.2017
comment
теперь получаю другую ошибку TypeError: Cannot read property 'branch' of undefined - person hemanth koganti; 12.01.2017
comment
теперь получаю эту ошибку: Cannot read property 'indexOf' of undefined - person hemanth koganti; 12.01.2017

Как предполагают другие ответы, вам нужно импортировать FormsModule

Также вы установили search.branch как ngModel, который не объявлен в файле машинописного текста компонента.

А также вам не нужно указывать массив declarations в декораторе компонентов. Удалите declarations: [LoanFilterPipe] из @Component.

Он указан в NgModule. Вам не нужно экспортировать его, если вы не собираетесь использовать его в другом модуле.

person Suraj Rao    schedule 12.01.2017
comment
мой LoanFilterPipe неправильный, потому что я получаю эту ошибку Cannot read property 'filter' of undefined - person hemanth koganti; 12.01.2017
comment
нет, я думаю, что это связано с асинхронным почтовым запросом. поместите свой ngFor внутри <div *ngIf="loans"> - person Suraj Rao; 12.01.2017
comment
или установите this.loans = []; в конструкторе компонента - person Suraj Rao; 12.01.2017
comment
о боже!!1 эти ошибки продолжают появляться Cannot read property 'indexOf' of undefined - person hemanth koganti; 12.01.2017
comment
это из-за того, что мой массив переопределяется для каждой итерации - person hemanth koganti; 12.01.2017
comment
item.title равно нулю. Я предполагаю, что название кредита не установлено, и вы должны поставить нулевой чек. 1 эти ошибки продолжают появляться › это часть программирования :).. - person Suraj Rao; 12.01.2017
comment
где именно я должен проверить null? - person hemanth koganti; 12.01.2017
comment
есть ли другой способ фильтрации или поиска, кроме этого. - person hemanth koganti; 12.01.2017