如果单击ngx typeahead结果，则停止formGroup valueChanges observable

Question

我有一个FormControl输入，带有一个预先输入的下拉列表，在完成对我的API的http调用后接收一个Observable Subject。

这里的问题是，我的函数下面有valueChanges Observable监听新输入。因此，如果用户键入“copenhagen”，则API返回与查询f.ex匹配的区域：“Copenhagen，Hovedstaden，Danmark”。如果单击该预输入输入，则valueChanges Observable会发出一个新值，这会使typeahead下拉列表再次出现。

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

查看流量图像

我已经尝试在setValue()和patchValue()中将emitEvent设置为false。

期望的行为：用户类型即：“copenhagen” - API获取与该查询匹配的位置 - 返回位置数组并在typeahead中显示（这是有效的） - 用户单击一个位置，以及object.place_name（例如“København， Hovedstaden，丹麦“）在输入字段中显示，但是直到用户键入新查询才会再次出现预先输入。

Answer 1

好吧我今天松饼...所以我创建了一个接口和这些变量：

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

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

我的订阅现在取决于html中的特定主题.next()input：

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的表单输入中，这很奇怪，但这不关我的事。干杯!

Answer 2

如果单击该预输入输入，则valueChanges Observable会发出一个新值，这会使typeahead下拉列表再次出现。

当你看看FormControl的方法时，你会看到：

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

我想你想把这个emitEvent改成false。