접근성 참조 로 목록 상자 팝업이 있는 WAI-ARIA 콤보 상자 의 모범 사례 권장 사항을 고려하십시오.

API 제안 콤보박스

고급 구조

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

입력

| 이름 | 유형 | 설명 |
| -------------- | -------------- | -------------- |
| value | string \| undefined | 입력의 초기값 |
| placeholder | string \| undefined | 입력에 대한 자리 표시자 |

출력

| 이름 | 유형 | 설명 |
| -------------- | -------------- | -------------- |
| valueChanges | EventEmitter<string> | 새 값이 선택되었을 때 발생하는 이벤트 |
| filterChanges | EventEmitter<string> | 필터가 변경될 때 발생하는 이벤트 |

콘텐츠 프로젝션
dt-옵션
dt-optgroup

체크리스트

• [ ] 적절한 키보드 지원(화살표: 위 아래)
• [ ] 와이아리아
• [ ] ngForms 호환성 고려
• [ ] 검증 고려

@lukett89님 , API 제안 감사합니다. 정말 훌륭한 출발점입니다.
dt-select 에서와 동일한 입력이 필요하다고 생각합니다.

나는 추가할 것이다
| 이름 | 유형 | 설명 |
| -------------- | -------------- | -------------- |
| id | string | 선택 ID |
| compareWith | (v1: T, v2: T) => boolean | 옵션 값과 선택한 값을 비교하는 기능 |
| required | boolean | 입력이 필요한지 여부 |
| panelClass | string | 콤보 상자 드롭다운에 추가된 클래스 |

"opened"와 같은 열린 상태에 대한 getter 및 해당 상태가 변경될 때 출력을 추가하는 것도 고려해야 합니다.
선택에 가장 가까운 API를 사용하여 가능한 한 쉽게 둘 중 하나를 전환할 수 있다면 도움이 될 것이라고 생각합니다.

@ffriedl89 답변 감사합니다.
구성 요소의 첫 번째 버전에 대해 언급한 모든 입력/출력을 고려할 것입니다.

최종 API 제안 콤보박스

고급 구조

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

입력

| 이름 | 유형 | 설명 |
| -------------- | -------------- | -------------- |
| value | string \| undefined | 입력의 초기값 |
| placeholder | string \| undefined | 입력에 대한 자리 표시자 |
| id | 문자열 | 선택 ID |
| compareWith | (v1: T, v2: T) => boolean | 옵션 값과 선택한 값을 비교하는 기능 |
| required | boolean | 입력이 필요한지 여부 |
| panelClass | string | 콤보 상자 드롭다운에 추가된 클래스 |

출력

| 이름 | 유형 | 설명 |
| -------------- | -------------- | -------------- |
| valueChanges | EventEmitter<string> | 새 값이 선택되었을 때 발생하는 이벤트 |
| filterChanges | EventEmitter<string> | 필터가 변경될 때 발생하는 이벤트 |
| openedChange | 이벤트 이미터| 선택 패널이 토글되었을 때 발생하는 이벤트입니다. |

콘텐츠 프로젝션
dt-옵션
dt-optgroup

체크리스트

• [ ] 적절한 키보드 지원(화살표: 위 아래)
• [ ] 와이아리아
• [ ] ngForms 호환성 고려
• [ ] 검증 고려

앞으로 2주 이내에 이 기능을 구현하고 싶습니다. 저에게 문제를 할당해 주시겠습니까?

@heartdisease 및 @lukett89 와 동기화하여 논의한 후 문제를 다시 할당했습니다.

두 가지 입력을 더 추가할 것을 제안합니다.
| 이름 | 유형 | 기본값 | 설명 |
| --- | --- | --- | --- |
| 로딩 | boolean | false | true로 설정하면 데이터가 현재 로드/필터링되고 있음을 사용자에게 보여주기 위해 로드 표시기가 표시됩니다. |
| 디스플레이 | (value: T) => string | (value: T) => ${값}`` | 콤보 상자에서 옵션을 나타내는 지정된 개체의 표시 이름을 반환하는 함수 |

displayWith 함수는 개체와 함께 콤보 상자를 사용하는 것과 관련이 있으며 로드 표시기는 대부분의 경우 필터링을 서버 측으로 오프로드하는 구성 요소에 대해 보증되는 것 같습니다.