Angular中NG-Bootstrap Typeahead显示Object Object而非数据问题

你遇到的核心问题是：现在si_id数组存储的是完整对象而非字符串，Typeahead默认无法识别对象的显示逻辑，同时异步加载导致初始值设置失效。下面是分步解决方案：

1. 修复结果模板的显示逻辑 #

你的结果模板直接将整个对象传给ngb-highlight，它会默认把对象转为字符串[Object Object]。需要明确指定要显示的属性（即serial_number）：

修改HTML中的结果模板：

<ng-template #rt let-r="result" let-t="term">
  <ngb-highlight [result]="r.serial_number" [term]="t"></ngb-highlight>
</ng-template>

2. 让输入框正确渲染选中的对象 #

当表单控件的值是对象时，需要告诉输入框提取哪个属性来显示。添加一个格式化函数即可：

在组件类中新增函数：

// 将对象转换为输入框可显示的文本
inputFormatter = (result: any) => result?.serial_number || '';

然后在input标签上绑定这个函数：

<input id="si_id" type="text" placeholder="Serial number" formControlName="si_id" 
       class="form-input" [ngbTypeahead]="search" [resultTemplate]="rt"
       [inputFormatter]="inputFormatter" />

3. 修正初始值的异步加载问题 #

你在ngOnInit中直接设置si_id初始值，但此时getSerials是异步请求，si_id数组还未加载数据，导致初始值为undefined。应该在数据加载完成后再更新表单：

修改组件中的getSerials函数：

private getSerials() {
  this.service.getSerials(this.customer_id).subscribe((data) => {
    // 直接赋值整个结果数组，替代循环push更简洁高效
    this.si_id = data['result'];
    // 数据加载完成后，设置表单初始值（如果有数据）
    if (this.si_id.length > 0) {
      this.serviceForm.patchValue({ si_id: this.si_id[0] });
    }
    console.log('Data', data); // 用逗号替代加号，避免对象被强制转为字符串
    this.loading = false;
  })
}

同时调整ngOnInit中的表单初始化代码，去掉无效的初始值硬编码：

ngOnInit() {
  this.getSerials();
  this.serviceForm = new FormGroup({
    customer_id: new FormControl(this.customer_id),
    si_id: new FormControl(null, Validators.required), // 初始值设为null，后续异步更新
  });
}

4. 可选：优化搜索函数（现有逻辑可保留） #

你的搜索过滤逻辑是正确的，用includes可以让代码更简洁：

search = (text$: Observable<string>) => text$.pipe(
  debounceTime(200),
  distinctUntilChanged(),
  map(term => term === '' ? [] : 
    this.si_id.filter(v => v.serial_number.toLowerCase().includes(term.toLowerCase())).slice(0, 10))
)

完成以上修改后，Typeahead就能正确显示序列号，选中后输入框也会渲染对应的serial_number，不再出现[Object Object]的问题。

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