带ngbTypeahead指令的Input，通过formControlName编程赋值后未更新

我之前也碰到过一模一样的情况，NgbTypeahead这个组件有时候和Angular表单控件的同步会有点“脱节”——核心原因是它内部维护了自己的视图状态，直接通过表单控件的setValue()更新值时，组件并没有自动感知到这个变化。

你可以试试下面这几个针对性的解决方案：

方案一：手动调用NgbTypeahead的writeValue方法 #

首先在组件类里通过@ViewChild获取到NgbTypeahead的实例：

import { ViewChild } from '@angular/core';
import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';

// ...

@ViewChild(NgbTypeahead) private userTypeahead: NgbTypeahead;

然后在你的testAction()函数里，更新表单值之后，手动调用writeValue方法把值同步到输入框：

testAction() {
  const searchValue = 'Obama';
  this.userEntryForm.controls['userSearch'].setValue(searchValue);
  // 手动同步到NgbTypeahead组件
  if (this.userTypeahead) {
    this.userTypeahead.writeValue(searchValue);
  }
}

方案二：结合ChangeDetectorRef强制触发变更检测 #

如果方案一没起作用，可能是视图变更检测没被触发，你可以引入ChangeDetectorRef来强制更新视图：

import { ChangeDetectorRef } from '@angular/core';

// ...

constructor(private cdr: ChangeDetectorRef) {}

testAction() {
  this.userEntryForm.controls['userSearch'].setValue('Obama');
  this.cdr.detectChanges(); // 强制Angular检测视图变化并更新
}

方案三：监听valueChanges同步DOM值（兜底方案） #

要是前两种方法都不行，你可以监听表单控件的valueChanges事件，直接手动更新输入框的DOM值（这个方案属于兜底，优先用前两种更优雅的方式）：

ngOnInit() {
  this.userEntryForm.controls['userSearch'].valueChanges.subscribe(value => {
    const inputElement = document.getElementById('find-user') as HTMLInputElement;
    if (inputElement) {
      inputElement.value = value;
    }
  });
}

本质上，这个问题是因为NgbTypeahead作为自定义指令，没有完全和Angular表单控件的变更机制无缝同步，所以需要我们手动补全这一步同步操作。

内容的提问来源于stack exchange，提问作者CodyBugstein