Я пытаюсь использовать ng2-завершитель для автозаполнения в окне поиска, и он не работает, за исключением массива строк. Я получаю «Результаты не найдены». На скриншоте видно, что в массив загружено «имя».
Я хочу использовать ng2-завершитель для поиска в массиве (скажем) Person.
Но нужно искать по имени и адресу, и поэтому я не могу просто использовать строку [].
Пробовал несколько подходов: как с удаленными данными, так и с локальными, но оба не удаются при использовании класса , Я попробовал простую версию в классе c Angular Тур героев учебник . Вот мои изменения.
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>
ошибка
