Остановите наблюдаемое значение formGroupChanges, если щелкнуть по результату ngx typeahead - PullRequest
Новая
       9

Остановите наблюдаемое значение formGroupChanges, если щелкнуть по результату ngx typeahead

0 голосов
/ 18 сентября 2018

У меня есть вход FormControl с выпадающим списком typeahead, который получает Observable Subject после выполнения http-вызова моего API.

Проблема здесь в том, что моя функция, приведенная ниже, имеет значение отслеживания прослушивания Valueна новые входы.Поэтому, если пользователь вводит «copenhagen», API возвращает области, соответствующие запросу, например: «Copenhagen, Hovedstaden, Danmark».Если щелкнуть этот ввод заголовка типа, valueChanges Observable выдает новое значение, в результате чего выпадающий список заголовков снова появляется. 

subscribeToLocation() {
    const subscription = this.locF.valueChanges
      .pipe(catchError(err => of(err)), debounceTime(800), distinctUntilChanged())
      .subscribe((formValue: ILocation<any>) => {
        this.initStoryLocationBody(formValue);
      })
  }

См. Изображения потока

No input First input

asdasd asdasd

Я уже пытался установить для emitEvent значениеfalse как в setValue(), так и в patchValue().

Желаемое поведение: пользователь вводит, например: «copenhagen» - API выбирает местоположения, соответствующие этому запросу - возвращает массив местоположений и отображает в typeahead (это работает)- пользователь щелкает местоположение, и имя object.place_name (например, «København, Hovedstaden, Denmark») отображается в поле ввода, но заголовок ввода не появляется, пока пользователь не введет новый запрос.

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

Если щелкнуть этот ввод заголовка типа, valueChanges Observable выдает новое значение, в результате чего снова появляется раскрывающийся список типов заголовка.

Когда вы смотрите на метод, который FormControl имеетвы увидите: 

    setValue(value: any, options?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
    emitModelToViewChange?: boolean;
    emitViewToModelChange?: boolean;
}): void;

Я думаю, что вы хотите изменить это emitEvent на false.

0 голосов
/ 18 сентября 2018

Ладно, я булочка сегодня ... Итак, я создал интерфейс и эти переменные: 

interface ILocation<T> {
  location?: string,
  country?: string,
  radius?: number,
  remember: boolean
}

subj = new Subject<ILocation<any>>();
model: any;

, и моя подписка теперь зависит от конкретной темы .next() вход в HTML: 

this.subj
  .pipe(catchError(err => of(err)), debounceTime(800), distinctUntilChanged())
  .subscribe((data: ILocation<any>) => {
    console.log(data);
    this.initStoryLocationBody(data);
  })

HTML: 

[(ngModel)]="model" [ngModelOptions]="{standalone: true}" (input)="this.subj.next({location:model});"

Мне кажется, это странно, что ngModel не следует использовать во входах формы, подключенных к FormGroup, но это не мое дело.Ура!

...