在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對錶格標題進行排序

回答

相關問題