Angular 7 -Sort select drop down options in custom order

问题

I have a select drop down where options are fetched from service dynamically using *ngFor .I want to reorder the options order in my custom way. is it possible to do from angular code.

The array is like this
console.log(this.paymentTypeData);
Array(5)
0: {value: "DAILY", code: "D", label: "Daily"}
1: {value: "SINGLE_TIER", code: "ST", label: "Single Tier"}
2: {value: "MULTI_TIER", code: "MT", label: "Multi Tier"}
3: {value: "NO_DISCOUNT", code: "ND", label: "No Discount"}
4: {value: "EOM", code: "EOM", label: "End of Month"}
length: 5
__proto__: Array(0)

Currently they look in this Order

Daily Single Tier

Multi Tier

No Discount

End of Month

I want to display in the below order

No Discount

Single Tier

Daily

Multi Tier

End of Month

    HTML:
   <select
   class="form-control">
  <option *ngFor="let list of paymentTypeData" [ngValue]="list.code">
   {{list.label}}
   </option>
   </select>

   Typescript:
    public paymentTypeData: any;
     
     this.supplier.getPayTermTypes().subscribe(paymentTypes => {
     this.paymentTypeData = paymentTypes;
});

回答1:

Sure. *ngFor uses the order of the array you give it, the easiest approach is sorting the array before passing it on to *ngFor.

How this looks in code will depend on how you are currently fetching the data. For instance, if you are doing

class WhateverComponent {
  selectOptions$ = this.service.fetchOptions();

  ...
}

You would add

class WhateverComponent {
  selectOptions$ = this.service.fetchOptions().pipe(
    tap(array => {
      array.sort((x,y) => x.order - y.order)
    })
  );

  ...
}

to sort the options by their "order" property,

or if you are doing

class WhateverComponent {
  selectOptions: Array<WhateverOption>;

  ngOnInit() {
    this.service.fetchOptions().subscribe(array => {
      this.selectOptions = array;
    })
  }
}

you'd change this to

class WhateverComponent {
  selectOptions: Array<WhateverOption>;

  ngOnInit() {
    this.service.fetchOptions().subscribe(array => {
      array.sort((x,y) => x.order - y.order);
      this.selectOptions = array;
    })
  }
}

Further information on how to use sort may be found in the docs.

回答2:

Yes, you can use a pipe for it.

html:

<select>
  <option *ngFor="let i of items | myOrder" [value]="i">{{i.title}}</option>
</select>

module:

@NgModule({
  declarations: [
    MyOrderPipe
  ]

component:

import { Component, OnInit } from '@angular/core';
import { Pipe, PipeTransform } from '@angular/core';

export interface IItem {
  value: string;
  code: string;
  label: string;
  order?: number;
}

@Pipe({
  name: 'myOrder',
  pure: false,
})
export class MyOrderPipe implements PipeTransform {
  transform(array: IItem[]): IItem[] {
    if (!Array.isArray(array)) {
      return;
    }
    array = array.sort((a: IItem, b: IItem) => a.order - b.order);
    return array;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  data: IItem[]; // <-- from server
  items: IItem[]; // <-- new array with the order field

  ngOnInit() {
    const mySettings = {
      1: 'No Discount',
      2: 'Single Tier',
      3: 'Daily',
      4: 'Multi Tier',
      5: 'End of Month',
    };

    this.items = this.data.map((item: IItem) => {
      return {
        ...item,
        order: this.getKeyByValue(mySettings, item.label),
      };
    });
  }

  getKeyByValue(object, value): number {
    return Number(Object.keys(object).find((key) => object[key] === value));
  }
}

来源：https://stackoverflow.com/questions/65016723/angular-7-sort-select-drop-down-options-in-custom-order

标签

angular

typescript