Angular 建议清单5

有一个FormGroup，其中填充了FormArray和相对FormControl。 我构建了一个服务（ValueChangeObservable），它使用给定的字符串在“字典”数组中查找类似的单词。该服务返回一个对象数组，该数组应填充输入下的建议列表

建议列表由3个类似于此的术语组成

我给出“table”字符串并返回：

  [
    {distance: 1, match : 'Table'},
    {distance: 3, match : 'Fabules'},
    {distance: 5, match : 'Ramioles'},
  ]

使用Levenstein算法计算距离，并指示要获得给定单词需要进行多少次更改

现在我需要建立行动。我点击术语，值改变，列表消失

重要的是，对于填充的每个输入，服务从（焦点）开始并返回其建议列表

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>

    <input [formControl]="queryField" type="text" />

第二部分

我想出了下面这样的办法。 当输入焦点上有一个可观察的对象时，列表被填充

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

  }

@组件({
选择器：“我的自动完成输入”，
样式URL:['./app.component.css']，
模板：`


{{r.match}


`
})
导出类自动完成组件{
@ContentChild（“输入”）输入：ElementRef；
@Input（）自动建议列表；
建造师(
私人搜索服务：搜索服务，
) {}
编辑输入（res）{
this.input.nativeElement.value=res；
this.autosuggestList=[]；
}
ngAfterViewInit（）{
Observable.fromEvent（this.input.nativeElement，'focus'）
.订阅（（数据：键盘事件）=>{
this.autosuggestList=this.\u searchService.spell（this.input.nativeElement.value）
});
}
}

但是表单数组没有更新，我必须在输入上按一些东西，以便更改表单控件“name”中的值

---

如何从contentChild修补/更新表单？editInput函数更精确？

我不明白为什么有两个输入：名称和值。。。我假设一个，输入一些东西就足够了，然后你会得到一个下拉列表来选择一些东西并将其填入输入中。没有

制作一个AutocompleteInputComponent，以便将代码放在一个好的专用位置。在这里，您放置了一个类型始终为

（在该组件中声明

@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选择器来区分内容子项：

忘记值。。顺便说一句，我不想要像select选项那样的下拉选择，但是一个ul-li你可以有

ul-li

，

div-div

或者任何你想要的。您将

自动建议列表

-列表传递到该组件，并像您在该列表的元素上做的那样制作一个*ngFor；它不更新formvalue；见第二部分。

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