Question

您好我正在开发Angular 5中的Web应用程序。我正在使用Angular 5实现自动搜索选项。这里我无法将数据绑定到建议。在建议中只显示小点而不是属性userName。下面是我的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



 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中的自动搜索

2 个答案: