Question

我是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;
      }
    }

Answer 1

首先，您创建的管道使用字符串[]作为参数，而不仅仅是字符串。其次，您不能使用[名称]，请参阅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;
}

Answer 2

public function index(){
    $var1= '1';
    $var2= '2';
    $var3= '3';
    $var4= '4';
    $var5= '5';
    $var6= '6';

    return view('index',compact(array_keys(get_defined_vars())));
}

在Angular 2中使用Orderby对表头进行排序

2 个答案: