Typeahead: выберите на размытие - PullRequest
Новая
       6

Typeahead: выберите на размытие

0 голосов
/ 21 мая 2018

Я использую Плагин угловой начальной загрузки для выбора значения из списка.

Однако он не работает, когда я набираю целое значение и щелкаю снаружи.

http://plnkr.co/edit/WjHkhPJVZXMMF79apiIF?p=preview

<code><ng-template #rt let-r="result" let-t="term">
  <img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r['flag']" width="16">
  {{ r.name}}
</ng-template>

<label for="typeahead-template">Search for a state:</label>
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
  [inputFormatter]="formatter" />
<hr>
<pre>Model: {{ model | json }}

Машинопись 

import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {debounceTime, map} from 'rxjs/operators';

interface IStateData {
        name: string;
        flag: string;
    }

const statesWithFlags: {name: string, flag: string}[] = [
  {'name': 'Alabama', 'flag': '5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'},
  {'name': 'Alaska', 'flag': 'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'},
  {'name': 'Arizona', 'flag': '9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'}

];

@Component({
  selector: 'ngbd-typeahead-template',
  templateUrl: 'src/typeahead-template.html',
  styles: [`.form-control { width: 300px; }`]
})
export class NgbdTypeaheadTemplate {
  public model: IStateData = {};

  search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      map(term => term === '' ? []
        : statesWithFlags.filter(v => v.name.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
    );

  formatter = (x: {name: string}) => x.name;

}

Когда я выбираю элемент из списка или использую клавишу табуляции, он работает нормально.Он правильно устанавливает значение модели.

enter image description here

Проблема: Когда я набираю целый город или вставляю значение и нажимаю за пределами, это делаетне работа.Это в основном не устанавливает элемент, когда я Blur на тип вперед

Объект модели не установлен должным образом, и он преобразуется в строку здесь.

enter image description here

Примечание: Мне нужно подобное в начальной загрузке Ngx.https://valor -software.com / ngx-bootstrap / # / typeahead # on-blur Но у них есть другая открытая проблема, из-за которой не удалось инициализировать данные .

1 Ответ

0 голосов
/ 21 мая 2018

Добавьте событие Blur к вашему входу 

<input id="typeahead-template" type="text" class="form-control" 
  [(ngModel)]="model"  
  [ngbTypeahead]="search" 
  [resultTemplate]="rt"
  [inputFormatter]="formatter" 
  (blur)="onBlur(model)" />

Затем определите этот метод в своем файле ts 

onBlur(search) {
  statesWithFlags.forEach(data => {
    if (search.toLowerCase() === data.name.toLowerCase()) {
      this.model = data;
    }
  })
}

Проверьте этот рабочий пример

http://plnkr.co/edit/V29qxa?p=preview

...