0

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

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

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

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

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>

失败的

显示失败的屏幕截图

4

1 回答 1

1

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

试试这个

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

或者

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

堆栈闪电战在这里

于 2020-02-02T04:26:54.537 回答