Die alphabetische Sortierung für dropdown

Ich begann mit Winkel 2 und Typoskript. Ich bin mit harten Zeit mit der Implementierung der code für es.
Meine Frage ist, wie zu tun, Sortier-option in meinem dropdown-Liste?

Hier ist HTML-code:

<div class="col-12">
    <select class="form-control" id="type" [(ngModel)]="measure" (change)="getMeasures()">
        <option *ngFor="let option of options" [ngValue]="option.measure">{{option.display}}</option>
      </select>
  </div>

Hier ist der Teil meiner Typoskript für Optionen:

    options = [
        {
          measure: 'length',
          display: 'Length'
        },
        {
          measure: 'area',
          display: 'Area'
        },
        {
          measure: 'volume',
          display: 'volume'
        },
        {
          measure: 'time',
          display: 'Time'
        },
        {
          measure: 'current',
          display: 'Current'
        },
        {
          measure: 'energy',
          display: 'Energy'
        },

  ]
  • Klären Sie Ihre Frage und das problem, das Sie konfrontiert sind. Auf die Metrik willst du Sortieren ?
  • Ich werde wie Sie zu Sortieren, wenn ich Sie auf dropdown-so werden Sie in aphabetical, um in meiner Liste. Also erstmal wird dann Strom etc.
  • haben Sie meine naswer
InformationsquelleAutor pooh098 | 2017-06-21
  1. 1

    Können Sie das Rohr in angular2, sagen orderBy,

    <div class="col-12">
    <select class="form-control" id="type" [(ngModel)]="measure" (change)="getMeasures()">
        <option *ngFor="let option of options | orderBy : 'measure'" [ngValue]="option.measure">{{option.display}}</option>
      </select>
  </div>

    DEMO

    InformationsquelleAutor Sajeetharan
  2. 8

    Die akzeptierte Antwort ist nicht mehr gültig. Laut der docs an https://angular.io/guide/pipes

    Anhang: Keine FilterPipe oder OrderByPipe Winkel-keine Rohre
    zum filtern und Sortieren von Listen. Vertraute Entwickler mit AngularJS
    wissen diese wie ein filter und orderBy. Es gibt keine Entsprechungen in Eckig.

    Dies ist nicht ein versehen. Angular bietet nicht solche Pfeifen, weil Sie
    schlecht durchführen und verhindern, dass aggressive Verkleinerung. ... Während einige
    egal, zu minifizieren diese aggressiv, die Winkelgeschwindigkeit Produkt sollte nicht
    verhindern, dass jemand aus der minifying aggressiv. Daher die Winkel -
    team hat beschlossen, dass alles Eckig werden minifizieren sicher.

    Das Winkel-team und die vielen erfahrenen Winkel-Entwickler stark
    empfehlen verschieben, filtern und Sortieren Logik in der Komponente
    selbst.

    InformationsquelleAutor PeeWee2201
  3. 1

    Sortierung Rohr angewandt wird, siehe https://angular.io/guide/pipes

    <option *ngFor="let option of options | orderBy:'measure'" [ngValue]="option.measure">{{option.display}}</option>
    InformationsquelleAutor Roman C
Schreibe einen Kommentar