0

パイプを使用して簡単な検索を実装しようとしています。私はパイプと 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>

ローン.コンポーネント.ts:

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);
            });

    }
};

私が得ているエラーは次のとおりです。

キャッチされていない (約束): エラー: テンプレート解析エラー: 「入力」の既知のプロパティではないため、「ngModel」にバインドできません

ローン.パイプ.ts:

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 { }
4

3 に答える 3

4

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 { }
于 2017-01-12T10:22:52.807 に答える
1

他の回答が示唆しているように、インポートする必要がありますFormsModule

またsearch.branch、コンポーネントの typescript ファイルで宣言されていない ngModel として設定しました。

またdeclarations 、コンポーネント デコレータで配列を指定する必要はありません。declarations: [LoanFilterPipe]@Component から削除 します。

これは NgModule で提供されます。別のモジュールで使用する場合を除き、エクスポートする必要はありません。

于 2017-01-12T10:29:31.270 に答える
1

FormsModuleあなたはあなたのコードに欠けています

angularによるとFormsModule、使用している場合はブートストラップ中に追加する必要があるngModelため、現在ngModelはFormModuleの一部であるため

于 2017-01-12T10:23:52.297 に答える