Angular 2 Material Design自动完成搜索框

Question

我在Angular2 Material Design上遇到了一些关于自动完成的问题，这些是发生的事情：

*当我键入与我搜索的字符相关的字符时，不会在自动完成功能中显示我在搜索文本框中输入的特定字符，如下图所示：

1. 在搜索框上键入之前的时间。
2. 在搜索框上输入后

第二个问题是，当我在用户列表中选择一个特定列表时，似乎它会显示[object Object]东西，但我不知道为什么会这样。 见下图：

1. 在列表上选择员工之前的时间
2. 在列表上选择员工后

这是我的下面代码，看看是否有我错过的东西或什么。

角度代码： new-useraccount-components.ts

 import { Component } from '@angular/core'; import { WebServiceComponents } from '../WebService/web.service'; import { FormControl } from '@angular/forms'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/operator/map'; @Component({ selector: 'new-user-account', template: ` <md-card class="card-margin"> <md-card-content> <md-input-container> <input mdInput placeholder="Select Employee" [mdAutocomplete]="auto" [formControl]="UserAccountCtrl" /><br /> </md-input-container> <md-autocomplete #auto="mdAutocomplete"> <md-option *ngFor="let userAccount of filterUserAccount | async" [value]="userAccount"> {{userAccount.username}} </md-option> </md-autocomplete> <md-input-container> <input mdInput placeholder="Username" /><br /> </md-input-container> </md-card-content> </md-card> ` }) export class NewUserAccountComponent{ UserAccountCtrl: FormControl; filterUserAccount: any; async ngOnInit(){ var response = await this.webService.getUserAccounts(); this.userAccounts = response.json(); } userAccounts = []; constructor(private webService : WebServiceComponents){ this.UserAccountCtrl = new FormControl(); this.filterUserAccount = this.UserAccountCtrl.valueChanges .startWith(null) .map(name => this.filteredUserAccount(name)); } filteredUserAccount(val: string) { return val ? this.userAccounts.filter(s => new RegExp(`^${val}`, 'gi').test(s)) : this.userAccounts; } } 

AppModule： app.module.ts

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MaterialModule } from '@angular/material'; import { AppComponent } from './app.component'; import { WebServiceComponents } from './WebService/web.service'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { UserAccountComponent } from './UserAccount/useraccount-components'; import { NewUserAccountComponent } from './UserAccount/new-useraccount-component'; @NgModule({ imports: [ BrowserModule, MaterialModule, ReactiveFormsModule, FormsModule ], declarations: [ AppComponent, UserAccountComponent, NewUserAccountComponent ], bootstrap: [ AppComponent ], providers: [ WebServiceComponents ] }) export class AppModule { } 

抱歉，我只是一个尝试使用这个新框架的新手。 希望有人会指导我如何解决此问题。 谢谢，祝您有美好的一天！

Answer 1

如果您阅读得足够仔细，这些文档就很清楚了：

• https://material.angular.io/components/autocomplete/overview

您将对标题“ 设置单独的控件和显示值 ”下的内容特别感兴趣。 它之所以不显示搜索结果，是因为您要显示的内容与您指定的[value]不同。

您遇到的另一个问题是，在列表中选择一个项目时，该项目的实际值会插入搜索框中。 由于这是一个userAccount而不是用户名，因此显示[object Object] 。

只需将其更改为[value]="userAccount.username"即可解决您的两个问题。 如果这样做不能达到预期效果，则必须按照文档中的说明使用[displayWith]属性。