FormArray와 상대 FormControl이 채워진 FormGroup이 있습니다. 주어진 문자열로 "사전"배열에서 비슷한 단어를 찾는 서비스 (valuechange Observable)를 만들었습니다. 이 서비스는 입력 바로 아래에 제안 목록을 채워야하는 객체 배열을 제공합니다.
제안 목록은 이와 유사한 3 개의 용어로 구성됩니다.
'table'문자열을 제공하고 반환합니다 :
[
{distance: 1, match : 'Table'},
{distance: 3, match : 'Fabules'},
{distance: 5, match : 'Ramioles'},
]
거리는 레 벤스 타인 알고리즘으로 계산되며 주어진 단어를 얻기 위해 얼마나 많은 변화를 수행해야하는지 나타냅니다.
이제 액션을 만들어야합니다. 용어를 클릭하면 값이 변경되고 목록이 사라집니다.
중요한 것은 각 입력에 대해 서비스가 (초점)으로 시작하고 제안 목록을 돌려주는 것입니다.
component.html
<form [formGroup]="myForm">
<fieldset formArrayName="parameters">
<ng-container *ngFor="let par of parameters.controls" [formGroup]="par">
<input formControlName="name" />
<ul class="filter-select">
<li *ngFor="let r of results" class="filter-select-list">
{{ r.match }}
</li>
</ul>
</ng-container>
</fieldset>
</form>
ng2-completer 또는 material autocomplete와 같은 라이브러리를 사용하고 싶지 않으며 가장 중요한 것은 주어진 문자열이 "tablered"이고 사전에 "Table Red"라는 단어가 있으면 datalist를 사용할 수 없기 때문에 datalist를 사용할 수 없다는 것입니다. 표시됩니다.
두 번째 데이터 목록은 크로스 브라우징 문제가있는 HTML5입니다.
이 동작을 어떻게 달성 할 수 있습니까?
복구 :
<올>component.html
<input [formControl]="queryField" type="text" />
service.ts
this.queryField.valueChanges
.debounceTime(200)
.distinctUntilChanged()
.subscribe( value => {
this.results = this._searchService.spell(value)
})
두 번째 부분
아래와 같은 것을 생각해 냈습니다. 입력 포커스에 Observable을 사용하면 목록이 채워집니다.
@Component({
selector: 'my-autocomplete-input',
styleUrls: ['./app.component.css'],
template: `
<ng-content></ng-content>
<ul class="filter-select">
<li *ngFor="let r of autosuggestList" class="filter-select-list">
<div (click)="editInput(r.match)">{{ r.match }}</div>
</li>
</ul>
`
})
export class AutocompleteComponent {
@ContentChild("input") input: ElementRef;
@Input() autosuggestList;
constructor(
private _searchService: SearchService,
) {}
editInput(res) {
this.input.nativeElement.value = res;
this.autosuggestList = [];
}
ngAfterViewInit() {
Observable.fromEvent(this.input.nativeElement, 'focus')
.subscribe((data: KeyboardEvent) => {
this.autosuggestList = this._searchService.spell(this.input.nativeElement.value)
});
}
}
하지만 폼 배열이 업데이트되지 않았습니다. FormControl "name"내부의 값을 변경하려면 입력에서 무언가를 눌러야합니다.
contentChild에서 양식을 패치/업데이트하려면 어떻게해야합니까? editInput 함수에서 더 정확합니까?
- 답변 # 1
관련 자료
- python - 목록 분할 문제
- python - 부분 문자열로 슬라이싱 목록
- python - for 루프로 문자열 목록을 만드는 방법
- typescript - Angular로 당겨서 새로 고침
- r - map ()으로 플롯 목록 만들기
- java - jpa가 포함 된 쿼리
- oracle - CBAC 권한이있는 프로 시저를 나열하는 방법
- database - 동일한 레코드의 값이있는 드롭 다운 목록
- python - 동일한 키로 dict 목록 생성
- c# - 각도 7의 MVC
- python - for 루프를 목록 이해력으로 바꾸기
- string - 파이썬으로 단어의 루프 목록
- python 3.7 - 일부 문자열로만 목록 만들기
- r - 목록으로 데이터 프레임의 이름을 바꾸는 방법
- python - Reduce로 목록을 정렬 할 수 있습니까?
- 각도 2에서 목록을 올바르게 표시하는 방법
- .htaccess - IP 목록 금지/리디렉션이있는 Htaccess
- javascript - 고유 한 값으로 할 일 목록
- python - 목록과 튜플 목록 비교
- 각도에 대한 다중 포인트 슬라이더에 대한 제안
- angular : TS의 초기화로 인해 개체의 문자열 보간이 작동하지 않습니다.
- javascript : typescript에서 html 요소를 감지하는 방법
- ngIonic 6 및 Angular 13을 사용하여 어레이가 변경/업데이트될 때 보기를 업데이트하지 않는 경우
- 다른 html 파일의 내용을 사용하는 ts 함수를 호출하는 html 파일에 버튼이 있습니다.
- Angular 10 서비스에서 TemplateRef 만들기
- angular : 'Observable'은 'EffectResult' 유형에 할당할 수 없습니다.
- Typescript/Angular: 확장 클래스/구성 요소에서 Getter/Setter 유형 캐스팅 업데이트
- javascript : Angular 구성 요소에 개체 값을 저장할 수 없습니다.
- angular : ngModel 값을 입력 값으로 설정
- angular : Typescript는 배열에서 n 요소의 모든 조합을 생성합니다.
이름과 값 ...이라는 두 가지 입력이있는 이유를 이해하지 못합니다. 무언가를 입력하기에 충분하다고 생각되면 무언가를 선택하여 입력에 채울 수있는 드롭 다운이 나타납니다. 아니요?
자동 완성 입력 컴포넌트를 만들어서 코드를 전용 장소에 두십시오. 거기에 항상
<input>
유형이어야합니다 배치 (그 구성 요소에서@ContentChild('input') input: ElementRef;
를 선언합니다. )이제 부모의 구성 요소에서 말할 수 있습니다 :
두 번째 입력이 필요한 경우 css-selectors를 사용하여 contentchildren 사이를 분리 할 수 있습니다 : https://scotch.io/tutorials/angular-2-transclusion-using-ng-content