1

私はAngularが初めてで、インターネット上のいくつかのチュートリアルから学んでいます。次に、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;
      }
    }
4

2 に答える 2

0 
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-27T18:14:18.657 に答える