Angular 7 / Typescript-정렬 선택 드롭 다운 옵션 특정 순서로

Nov 26 2020

select dropdown사용하여 동적으로 서비스에서 옵션을 가져 오는 곳이 있습니다 *ngFor. 사용자 지정 방식으로 옵션 순서 를 다시 정렬 하고 싶습니다 . 각도 코드에서 할 수 있습니까?. 배열은 다음과 같습니다.

   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)

현재 그들은이 순서를 본다

  • 매일
  • 단일 계층
  • 다중 계층
  • 할인 없음
  • 이달 말

하지만 다음 순서로 표시하고 싶습니다.

  • 할인 없음
  • 단일 계층
  • 매일
  • 다중 계층
  • 이달 말

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;
});

답변

LotteLemmens Nov 26 2020 at 09:07

paymentTypes에 sortOrder 속성을 추가하는 것이 좋습니다. 그런 다음 paymentTypes를 가져올 때 지정된 순서로 정렬 할 수 있습니다.

this.paymentTypeData.sort((a,b) => a.sortOrder > b.sortOder ? -1 : 1;
MikkelChristensen Nov 26 2020 at 10:37

백엔드에 sortOrder를 추가하는 Lotte Lemmens 솔루션이 프론트 엔드에 추가하는 것보다 이상적이라고 말할 수 있습니다.

그러나 백엔드를 변경할 수없는 경우 프런트 엔드에 정의 된 조회 테이블을 도입하여 정렬 순서를 결정할 수 있습니다.

정렬 할 속성의 값으로 테이블의 각 키를 정의합니다. 이 경우 "값":

const sortOrderTable = {
  "DAILY": 0,
  "SINGLE_TIER": 0,
  "MULTI_TIER": 0,
  "NO_DISCOUNT": 0,
  "EOM": 0
}

이제 원하는 정렬 순서를 반영하도록 각 특정 값을 조정합니다.

마지막으로 요청에 파이프를 추가 .ts하여 정렬을 수행합니다.

this.supplier.getPayTermTypes()
  .pipe(
    map(apiResponse => apiResponse.sort((a,b) => sortOrderTable[a.value] > sortOrderTable[b.value] ? -1 : 1)))
  .subscribe(paymentTypes => {this.paymentTypeData=paymentTypes;});

NB 이것은 속성 값을 정렬 순서 테이블과 일치시키기 위해 변경되지 않도록 서버에서 응답 개체의 속성 이름에 의존하기 때문에 깨지기 쉬운 디자인입니다.