角度2材料設計オートコンプリートの検索ボックス

Question

私はこれらのものですAngular2材料設計上のオートコンプリート上のいくつかの問題が起こったのだ：

*私はそれが表示されません検索1に関連付けられている文字を入力するとオートコンプリートの下の写真のように、私は、検索テキストボックスに入力された特定の文字：

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

2番目の問題は、ユーザーのリストで特定のリストを選択すると、[object Object]と表示されているように見えますが、なぜそれが起こるのかわかりません。下図を参照してください。

1. When before selecting a employee on the list
2. When after selecting a employee on the list

私は逃したか、どのような何かがあるかどうここでは以下の私のコードを見ています。

角度コード：新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]以外のものを表示するため、検索結果が表示されません。

もう1つの問題は、リスト内の項目を選択するときに、その項目の実際の値が検索ボックスに挿入されることです。これはユーザ名ではなくuserAccountなので、[object Object]が表示されます。

[value]="userAccount.username"に変更するだけで、両方の問題を解決できます。これで目的の効果が得られない場合は、ドキュメントの説明に従って[displayWith]属性を使用する必要があります。