在Angular 2中使用Orderby对表格标题进行排序

我对Angular很新颖，我正在通过互联网上的一些教程学习它。现在我想学习如何使用orderby来对我的英雄表的表头进行排序。我不明白管道以及如何从组件调用它。我只是不明白如何使用管道。当他们在教程中解释这些时，我不明白。有人可以向我解释这个，所以我可以理解到底发生了什么？我不明白变换方法。这是我的代码，你能看到什么是错的？在此先感谢在Angular 2中使用Orderby对表格标题进行排序

Superheroes.component.html 
enter code here` 
    <tr *ngFor="let hero of heroes | orderBy:['-hero.id', 'hero.name', 
      '-hero.phone-number', 'hero.country']"> 

I generated the pipe, but it is not working. 

Orderby.pipe.ts 
import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ name: 'orderby', pure: false }) 

export class OrderbyPipe implements PipeTransform { 

    transform(heroes: any[], name: string): any[] { 

    heroes.sort((a: any, b: any) => { 

     if (a[name] < b[name]) { 
     return -1; 
     } else if (a[name] > b[name]) { 
     return 1; 
     } else { 
     return 0; 
     } 
    }); 
    return heroes; 
    } 
} 


    Superheros.component.ts 
    import { Component, OnInit, Pipe, PipeTransform, Input } from '@angular/core'; 
    import { FormControl, FormGroup, Validators } from '@angular/forms'; 

    import { OrderbyPipe } from '../orderby.pipe'; 

    import { Heroes } from '../model/hero'; 
    import { HeroService } from '../services/hero.service'; 

    @Component({ 
     selector: 'app-superheroes', 
     templateUrl: './superheroes.component.html', 
     styleUrls: ['./superheroes.component.css'], 
     providers: [HeroService], 

    }) 

    export class SuperheroesComponent implements OnInit { 

     isValidFormSubmitted: boolean = null; 
     searchForm = null; 
     statusmessage: string = "Nothing submitted"; 

     //records: Array<any>; 
     isDesc: boolean = false; 
     column: string = 'Name'; 
     direction: number; 
     heroes: Hero[]; 

     constructor(private heroService: HeroService) { } 

     ngOnInit(): void { 
     this.searchForm = new FormGroup({ 
      searchmode: new FormControl('', Validators.required) 

     }); 

     // this.setDefaultValues(); 
     this.getHeroes(); 
     } 

     getHeroes(): void { 
     this.heroService.getHeroes().then(heroes => this.heroes = heroes); 
     } 

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

来源

2017-09-27 Sanita Bril

觉得作为一个真正的管道。你有一些东西，通过管道按压它，再次出来的东西...只是可能看起来有点不同于以前。取决于管道的外观，内容将被转换。 – hogan

你可以使用'材料角'排序标题组件，检查：https：//material.angular.io/components/sort/overview –

首先，您制作的管道使用字符串[]作为参数，而不是字符串。其次，您不能使用[名称]，请参见https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe。你可以使用它的一些像

//use <tr *ngFor="let hero of heroes | orderBy:'name'"> 
export class OrderbyPipe implements PipeTransform { 

transform(heroes: any[], name: string): any[] { 
    if (name=='name'){ 
    heroes.sort((a: any, b: any) => { 
    return a.name==b.name?0:a.name<b.name?-1:1; 
    } 
    return heroes; 
}

来源

2017-09-27 06:53:07 Eliseo

我做了改变排序没有被执行？我认为它与和component.ts文件有关。 –

在您的app.module中，您必须在“声明”@NgModule（{？[...]，declarations：[orderby，...]]，providers：[..]，bootstrap：[AppComponent] }） – Eliseo

My app.module.ts is like this. 

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { FormControl, FormGroup, Validators, } from '@angular/forms'; 
import { ReactiveFormsModule } from '@angular/forms'; 

import { AppComponent } from './app.component'; 
import { OrderbyPipe } from './orderby.pipe'; 
import { SuperherosComponent } from './superheros/superheros.component'; 

export const routes: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'superheros', component: SuperherosComponent } 

    ]; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    OrderbyPipe, 
    SuperherosComponent 
    ], 
    imports: [ 
    BrowserModule, ReactiveFormsModule, RouterModule.forRoot(routes) 

    ], 
    providers: [], 
    bootstrap: [AppComponent], 

}) 
export class AppModule { }

来源

2017-09-27 18:14:18

在Angular 2中使用Orderby对表格标题进行排序

回答

相关问题