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

Question

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

我想使用ng2-completer搜索一个(比方说) Person数组。

但是需要根据名称和地址进行搜索，所以我不能只使用string[]。

尝试了许多方法:既使用远程数据，也使用本地，但在使用类时都失败了。我在经典的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>

失败

​

​

Answer 1

看起来你在以错误的方式使用titleField。根据文档，它是从输入数据中显示为搜索结果的字段。

尝尝这个

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

或

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

Stackblitz here