Question

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

*当我输入与我搜索的字符相关联的字符时，它不会在自动填充上显示我在搜索文本框中输入的特定字符，如下图所示：

When before typing on the search box.
When after typing on the search box

第二个问题是，当我在用户列表中选择特定列表时，它似乎会显示[object Object]内容，而我不知道它为什么会发生。见下图：

When before selecting a employee on the list
When after selecting a employee on the list

以下是我的代码，看看是否有我遗漏的东西或者是什么。

Angular代码： new-useraccount-components.ts

＆＃13;

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;
  }
}

＆＃13;

AppModule： app.module.ts

＆＃13;

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 { }

＆＃13;

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

Answer 1

如果您仔细阅读文档，那么文档就非常清楚了：

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

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

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

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

Angular 2 Material Design自动完成搜索框

1 个答案: