Список предложений с Angular 5 - PullRequest
Новая
       15

Список предложений с Angular 5

0 голосов
/ 29 апреля 2018

Существует FormGroup с заполненным FormArray и относительным FormControl. Я построил сервис (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-завершитель или автозаполнение материала, и самое главное, я не могу использовать datalist, потому что, если данная строка "tablered" и в словаре присутствует слово "Table Red", Datalist не показывает вверх.

И второй список данных - HTML5 только с проблемой перекрестного просмотра.

Как мне добиться этого поведения?

СПРАВКА:

  1. Каждый вход этого массива должен подключаться к сервису ON FOCUS, который ищет слово в словаре (выполняется только с одним вводом - смотрите ниже - но не в * ngFor)
  2. Этот сервис возвращает массив и заполняет список предложений (готово)
  3. Затем нажмите на предложение
  4. Изменение значения
  5. Список исчезнет

component.html 

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

service.ts 

   this.queryField.valueChanges
    .debounceTime(200)
    .distinctUntilChanged()
    .subscribe( value => {  
     this.results = this._searchService.spell(value)
  })

ВТОРАЯ ЧАСТЬ

Я придумал что-то вроде ниже. При наличии наблюдаемого в фокусе ввода список заполняется. 

   @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.

Как я могу пропатчить / обновить форму из contentChild? точнее в функции editInput?

1 Ответ

0 голосов
/ 29 апреля 2018

Я не понимаю, почему у вас есть два входа: имя и значение ... Я предполагаю, что одного для ввода чего-то достаточно, а затем вы получаете выпадающий список, чтобы выбрать что-то и заполнить его во ввод. Нет

Создайте AutocompleteInputComponent, чтобы иметь свой код в прекрасном выделенном месте. Там вы помещаете объект, который всегда должен иметь тип <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-селекторы, чтобы различать contentchildren: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

...