Angular 7 / Typecript -Sort Select opciones desplegables en orden particular
Tengo un lugar select dropdowndonde las opciones se obtienen del servicio dinámicamente usando *ngFor. Quiero reordenar el orden de la opción a mi manera personalizada. ¿Es posible hacerlo desde código angular ?. La matriz es así
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)
Actualmente buscan en esta Orden
- Diario
- Nivel único
- Nivel múltiple
- Sin descuento
- Fin de mes
Pero quiero mostrar en el siguiente orden:
- Sin descuento
- Nivel único
- Diario
- Nivel múltiple
- Fin de mes
HTML:
<select
class="form-control">
<option *ngFor="let list of paymentTypeData" [ngValue]="list.code">
{{list.label}}
</option>
</select>
Mecanografiado:
public paymentTypeData: any;
this.supplier.getPayTermTypes().subscribe(paymentTypes => {
this.paymentTypeData = paymentTypes;
});
Respuestas
Sugeriría agregar una propiedad sortOrder en su paymentTypes, luego, cuando obtenga sus paymentTypes, puede ordenarlos en ese orden específico.
this.paymentTypeData.sort((a,b) => a.sortOrder > b.sortOder ? -1 : 1;
Yo diría que la solución de Lotte Lemmens de agregar un sortOrder en el back-end sería ideal en lugar de agregarlo en el front-end.
Sin embargo, si no puede cambiar el back-end, puede introducir una tabla de búsqueda definida en el front-end para determinar su orden de clasificación.
Defina cada clave en su tabla según el valor de la propiedad por la que desea ordenar. En este caso "valor":
const sortOrderTable = {
"DAILY": 0,
"SINGLE_TIER": 0,
"MULTI_TIER": 0,
"NO_DISCOUNT": 0,
"EOM": 0
}
Ahora ajuste cada valor específico para reflejar el orden de clasificación deseado.
Finalmente, agregue una tubería a su solicitud en su .tspara realizar la clasificación:
this.supplier.getPayTermTypes()
.pipe(
map(apiResponse => apiResponse.sort((a,b) => sortOrderTable[a.value] > sortOrderTable[b.value] ? -1 : 1)))
.subscribe(paymentTypes => {this.paymentTypeData=paymentTypes;});
NB Este es un diseño frágil ya que se basa en el nombre de propiedad del objeto de respuesta de su servidor para que no cambie para hacer coincidir los valores de propiedad con la tabla de ordenación.