未处理的Promise拒绝:模板解析错误:无法找到管道'orderBy'

时间:2017-07-22 17:09:23

标签: javascript angular

这是我的第一个有角度的2项目,我创建了一个管道转换来对表格中的数据进行排序。该项目成功编译。但是,当运行浏览器抛出错误时,它无法找到已创建的管道。如果这看起来很基本,请原谅我

 public ActionResult create([Bind(Include = "Name,Author")] Modelclass modelclass)
{
//Do something here
}

在app.module.ts中输入相同内容

import { Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

  transform(records: Array<any>, args?: any): any {

    return records.sort(function(a, b){
      if(a[args.property] < b[args.property]){
        return -1 * args.direction;
      }
      else if( a[args.property] > b[args.property]){
        return 1 * args.direction;
      }
      else{
        return 0;
      }
    });
  };

}

在我的HTML中我输入了如下

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { HttpModule } from '@angular/http';
import {AppComponent} from './app.component';
import {ReturnsJsonArrayService} from "./components/display-data/display-json-data.service";
import {DisplayCustomerDataComponent} from "./components/display-data/display-json-data.component";
import {Ng2PaginationModule} from 'ng2-pagination';

import { HomeComponent } from './components/home/home.component';
import { LenderComponent } from './components/lender/lender.component';
import { PoolComponent } from './components/pool/pool.component';


import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
import {AppRoutingModule} from "./app-routing.module";
import { UserLoginComponent } from './components/user-login/user-login.component';
import { FormValidationComponent } from './components/form-validation/form-validation.component';
import { SearchFilterPipe } from './components/search-filter.pipe';
import {OrderByPipe} from "./components/funding-request/orderBy.pipe";




@NgModule({
  declarations: [
    AppComponent,DisplayCustomerDataComponent, HomeComponent,
    LenderComponent, PoolComponent, 
     PageNotFoundComponent,
    UserLoginComponent, FormValidationComponent, SearchFilterPipe, OrderByPipe
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    Ng2PaginationModule,


  ],
  providers: [ReturnsJsonArrayService,SearchFilterPipe,OrderByPipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

正在使用的组件是

<tr *ngFor="let x of selectedData | orderBy: {property: column, direction: direction}" >

当页面在浏览器上加载时,会抛出以下错误

import { Component } from '@angular/core';



@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.css']
})
export class CategoryComponent  {
  records: Array<any>;
  isDesc: boolean = false;
  column: string = 'CategoryName';
  direction: number;

  constructor() { }

  sort(property){
    this.isDesc = !this.isDesc;
    this.column = property;
    this.direction = this.isDesc ? 1 : -1;
  };

}

0 个答案:

没有答案