无法将数据绑定到 Angular5 中的自动搜索

Question

您好，我正在 Angular 开发 Web 应用程序 5. 我正在使用 Angular 实现自动搜索选项 5. 这里我无法将数据绑定到建议。在建议中只显示小点而不是属性用户名。下面是我的 html 代码。

<p-autoComplete [(ngModel)]="username" [suggestions]="filteredUsernamesSingle" (completeMethod)="filterUsernameSingle($event)" field="name" [size]="30"
placeholder="Usernames" [minLength]="3"></p-autoComplete>
<span style="margin-left:10px">UserName: {{username ? username.username||username : 'none'}}
</span>

下面是我的类型脚本代码。

  filterUsername(query, usernames) {
        let filtered: any[] = [];
        for (let i = 0; i < usernames.length; i++) {
            let username = usernames[i];
            if (username.userName.toLowerCase().indexOf(query.toLowerCase()) == 0) {
                filtered.push(username);
            }
        }
        this.filteredUsernamesSingle = filtered;
    }

下面是我的过滤变量保存的样本数据。

[{"id":"7fc30bbe-0b3d-447b-a45a-9ebbfbc13cf2","userName":"Mike","upn":"mik@.onmicrosoft.com"}]

有人可以帮助我完成这项工作吗？非常感谢。

Answer 1

将字段值设为'userName'。

<p-autoComplete [(ngModel)]="username" [suggestions]="filteredUsernamesSingle" (completeMethod)="filterUsernameSingle($event)" field="userName" [size]="30" placeholder="Usernames" [minLength]="3"></p-autoComplete>

Answer 2

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code> Your app.component.html should now look like this:

<input [(ngModel)]="searchText" placeholder="search text goes here">
<ul>
  <li *ngFor="let c of characters | filter : searchText">
{{c}}
  </li>
</ul>
Your app.module.ts

import { FilterPipe} from './filter.pipe';
@NgModule({
  declarations: [ FilterPipe ],
})

Create the Filter Pipe

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
      return it.toLowerCase().includes(searchText);
    });
   }
}

无法将数据绑定到 Angular5 中的自动搜索

Unable to bind data to auto search in Angular5

arrays

angular5