ng2-completer在对象数组上搜索时不返回任何搜索结果 [英] ng2-completer does not return any search results while searching on an array of objects

问题描述

我正在尝试使用ng2-completer在搜索框中进行自动填充，除字符串数组外，该方法不起作用. 我收到未找到结果".从屏幕截图中可以看出，名称"已加载到数组中.

I am trying to use ng2-completer for auto-completing in a search box and it does not work except for an array of strings. I get 'No Results found'. From the screenshot it can be seen that "name" has been loaded into the array.

我想使用 ng2-completer 搜索(说)Person数组

I want to use ng2-completer to search on an array of (say) Person.

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

But need to search on name and address and so I cannot just use a string[].

尝试了多种方法:使用远程数据和本地方法，但是在使用类时都失败. 我已经尝试了经典的《英雄的天使之旅》 教程的一个简单版本. 这是我的更改.

Tried a number of approaches: both with Remote Data and also with Local but both fail when using a class. I have tried a simple version on the classic Angular Tour of Heroes tutorial. Here are my changes.

app.component.ts

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

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>

失败

推荐答案

好像您在以错误的方式使用titleField.根据文档，该字段将作为输入数据的搜索结果显示.

Looks like you are using titleField in the wrong way. According to the documents it's the field which will be displayed as search result from your input data.

尝试一下

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

或

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

Stackblitz 此处

Stackblitz here

这篇关于ng2-completer在对象数组上搜索时不返回任何搜索结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！