>

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입니다.

이 동작을 어떻게 달성 할 수 있습니까?

복구 :

<올>
  • 이 배열의 각 입력은 사전에서 단어를 찾는 서비스 ON FOCUS에 연결해야합니다 (하나의 입력만으로 완료-아래를 보지만 * ngFor는 아님)
  • 이 서비스는 배열을 반환하고 제안 목록을 채 웁니다 (완료)
  • 그런 다음 제안을 클릭
  • 값 변경
  • 목록이 사라집니다
  • 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

      이름과 값 ...이라는 두 가지 입력이있는 이유를 이해하지 못합니다. 무언가를 입력하기에 충분하다고 생각되면 무언가를 선택하여 입력에 채울 수있는 드롭 다운이 나타납니다. 아니요?

      자동 완성 입력 컴포넌트를 만들어서 코드를 전용 장소에 두십시오. 거기에 항상 <input> 유형이어야합니다 배치  (그 구성 요소에서 @ContentChild('input') input: ElementRef; 를 선언합니다. )

      이제 부모의 구성 요소에서 말할 수 있습니다 :

      <ng-container *ngFor="let par of parameters.controls" [formGroup]="par">
          <my-autocomplete-input [autosuggestList]="valuechange">
              <input formControlName="name"/>
          </my-autocomplete-input>
      </ng-container>
      
      

      두 번째 입력이 필요한 경우 css-selectors를 사용하여 contentchildren 사이를 분리 할 수 ​​있습니다 : https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

  • 이전 informatica - 상태 이름을 기반으로 여러 파일에 데이터 쓰기
  • 다음 amazon web services - AWS Lambda와 함께 파이썬 로깅 사용