如果单击ngx typeahead结果，则停止formGroup valueChanges可观察

Question

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

这里的问题是，我下面的函数具有侦听新输入的valueChanges Observable。因此，如果用户键入“哥本哈根”，则API返回与查询f.ex.相匹配的区域：“哥本哈根，霍维斯塔登，丹麦”。如果单击该预输入，则valueChanges Observable会发出一个新值，这将使预输入下拉菜单再次出现。

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获取与查询匹配的位置-返回位置数组并以预先输入的方式显示（此操作有效）-用户单击一个位置，然后单击object.place_name（例如，丹麦Hovedstaden的“København” ”）显示在输入字段中，但是直到用户键入新查询后，重新输入才会再次出现。

Answer 1

好，我今天是松饼... 所以我创建了一个Interface和这些变量：

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

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

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

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   一个新值，使再次输入下拉菜单再次出现。

查看FormControl拥有的方法时，您会看到：

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

我猜您想将此emitEvent更改为false。