ng2-completer 搜索对象数组时不返回任何搜索结果答案

【问题标题】：ng2-completer does not return any search results while searching on an array of objectsng2-completer 搜索对象数组时不返回任何搜索结果
【发布时间】：2020-05-18 05:05:32
【问题描述】：

我正在尝试使用 ng2-completer 在搜索框中自动完成，但除了字符串数组外它不起作用。我得到“未找到结果”。从截图可以看出“name”已经加载到数组中了。

我想使用ng2-completer 来搜索（比如说）Person 的数组。

但需要搜索姓名和地址，所以我不能只使用字符串[]。

尝试了多种方法：使用远程数据和本地，但在使用类时都失败了。我在经典的 Angular Tour of Heroes tutorial 上尝试了一个简单的版本。这是我的更改。

app.component.ts

import { Component } from '@angular/core';
import { CompleterService, CompleterData } from 'ng2-completer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Tour of Heroes';
  protected searchStr: string;
  protected dataService: CompleterData;
  searchData: Array<Person> = [];
  constructor(private completerService: CompleterService) {
    this.dataService = completerService.local(this.searchData, 'name', 'person');
    for(let i=0; i<10; i++) {
      let p = new Person(
        i, 
        "name" + i,
        "address" + i,
        1000);
      this.searchData.push(p);
      console.log("person["+i+"] :" + p.id + " " + p.name + " " + p.address);
    }
  }

}

export class Person {
  id: number;
  name: string;
  address: string;
  income: number;
  constructor(id:number, name:string, address:string, income:number) {
    this.id = id;
    this.name = name;
    this.address = address;
    this.income = income;
  }
}

app.component.html

<h1>{{title}}</h1>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
</nav>
<h1>Search person</h1>
            <ng2-completer [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0"></ng2-completer>
            <h1>Search captain</h1>
<div style="width:100px;height:100px;border:1px solid rgb(255, 255, 0);">This is app component!</div>

<router-outlet></router-outlet>
<app-messages></app-messages>

失败

【问题讨论】：

你可以创建 stackblitz 吗？
您能否将我的代码复制粘贴到堆栈闪电战教程中？
我的回答有帮助吗？

标签： angular typescript ng2-completer

【解决方案1】：

看起来您以错误的方式使用 titleField。根据文档，该字段将显示为您输入数据的搜索结果。

试试这个

this.dataService = completerService.local(this.searchData, 'name', 'name');

或

this.dataService = completerService.local(this.searchData, 'name', 'address');

Stackblitz here

【讨论】：