Question

这是我的简单管道，按字母顺序排列

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

@Pipe({name: 'orderBy'})
export class OrderByPipe implements PipeTransform {
  public transform(array: any[], args: string): any {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

这是我使用它的组件

<div class="row page-titles">
  <div class="col-md-5 align-self-center">
    <h3 class="text-themecolor">Agente</h3>
  </div>
  <div class="col-md-7 align-self-center">
    <ol class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="">Home</a>
      </li>
      <li class="breadcrumb-item">
        <a href="">Agenti</a>
      </li>
      <li class="breadcrumb-item">
        <a href="">Gestione account</a>
      </li>
    </ol>
  </div>
</div>
<div class="row">
  <div class="col-lg-12">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title"><span class="lstick"></span>Lista agenti</h4>
        <div class="table-responsive">
          <table class="table">
            <thead>
            <tr>
              <th (click)="ordinamento = ['+nome']">Nome</th>
              <th>Cognome</th>
              <th>Indirizzo</th>
              <th>Numero di telefono</th>
              <th>Stato</th>
              <th>Modifica</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let agent of agents | orderBy: ordinamento">
              <td>{{agent.nome}}</td>
              <td>{{agent.cognome}}</td>
              <td>{{getFullAddress(agent)}}</td>
              <td>{{agent.numeroTelefono}}</td>
              <td><span class="badge badge-success" [ngClass]="getLabelStatusAgent(agent)">{{agent.status}}</span></td>
              <td><button class="btn btn-info btn-sm" [routerLink]="['dettaglio/' + agent.id]">Modifica</button></td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Ordinamento是一个空数组。我尝试按名称订购，但是当我点击时没有任何反应。我将添加一个图标（两个箭头），我的目的是升序/降序排序字段（点击th）。

Answer 1

我不得不分叉您的项目以更好地理解问题。你以错误的方式使用管道。你正在传递数组迭代和实体执行顺序，但你根本没有考虑实体。

让我修改一下你的项目：

<th (click)="ordinamento = 'nome'">Nome</th>

html应该只传递实体名称。

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

@Pipe({name: 'orderBy'})
export class OrderByPipe implements PipeTransform {
  public transform(array: any[], entity: string): any {
    array.sort((a: any, b: any) => {
      if (a[entity] < b[entity]) {
        return -1;
      } else if (a[entity] > b[entity]) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

管道应该按照传递给它的实体对数组进行排序。如果不指定要排序的实体，则永远不会像对待的那样对对象数组进行排序。

对不起，我尽力解释自己。我希望我帮助你！招呼

Angular 2 orderby列表

1 个答案: