forms - Angular 5가 포함 된 제안 목록

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 함수에서 더 정확합니까?