自動完成材料Angular 2實現錯誤

Question

當我在材料設計上使用自動完成實現時，我對角度2有一個錯誤，我不知道爲什麼，因爲這是我第一次實現它與後端asp.net核心一起實踐。我嘗試安裝一些ng2庫，但根本不工作。這裏是我下面的代碼：

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.filterUserAccount(name)); 
 
    } 
 

 

 

 

 
    
 

 
    filteredUserAccount(val: string) { 
 
    return val ? this.userAccounts.filter(s => new RegExp(`^${val}`, 'gi').test(s)) 
 
       : this.userAccounts; 
 
    } 
 
}

和錯誤，如下所示：

zone.js:645 Error: Uncaught (in promise): Error: Template parse errors: 
 
Can't bind to 'formControl' since it isn't a known property of 'input'. ("ainer> 
 
         <input mdInput placeholder="Select Employee" [mdAutocomplete]="auto" [ERROR ->][formControl]="UserAccountCtrl" /><br /> 
 
        </md-input-container> 
 
        "): ng:///AppModule/NewUserAccountComponent.html@4:93 
 
Error: Template parse errors: 
 
Can't bind to 'formControl' since it isn't a known property of 'input'. ("ainer> 
 
         <input mdInput placeholder="Select Employee" [mdAutocomplete]="auto" [ERROR ->][formControl]="UserAccountCtrl" /><br /> 
 
        </md-input-container> 
 
        "): ng:///AppModule/NewUserAccountComponent.html@4:93 
 
    at syntaxError (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34) 
 
    at TemplateParser.parse (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:11951:19) 
 
    at JitCompiler._compileTemplate (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25723:39) 
 
    at eval (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:62) 
 
    at Set.forEach (native) 
 
    at JitCompiler._compileComponents (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:19) 
 
    at createResult (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25532:19) 
 
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:391:26) 
 
    at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:141:43) 
 
    at http://localhost:3002/node_modules/zone.js/dist/zone.js:818:57 
 
    at syntaxError (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34) 
 
    at TemplateParser.parse (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:11951:19) 
 
    at JitCompiler._compileTemplate (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25723:39) 
 
    at eval (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:62) 
 
    at Set.forEach (native) 
 
    at JitCompiler._compileComponents (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:19) 
 
    at createResult (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25532:19) 
 
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:391:26) 
 
    at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:141:43) 
 
    at http://localhost:3002/node_modules/zone.js/dist/zone.js:818:57 
 
    at resolvePromise (http://localhost:3002/node_modules/zone.js/dist/zone.js:770:31) 
 
    at resolvePromise (http://localhost:3002/node_modules/zone.js/dist/zone.js:741:17) 
 
    at http://localhost:3002/node_modules/zone.js/dist/zone.js:818:17 
 
    at ZoneDelegate.invokeTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:424:31) 
 
    at Zone.runTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:191:47) 
 
    at drainMicroTaskQueue (http://localhost:3002/node_modules/zone.js/dist/zone.js:584:35) 
 
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:490:25)

我不知道怎麼回事，但我也跟着angular material design autocomplete component中的步驟，但它似乎不適合我。

有誰知道如何解決這個問題？有人可以幫我用我的代碼嗎？我是新手，現在正在解決這個問題近3個小時。

謝謝你，祝你有美好的一天！

Answer 1

進口FormsModule, ReactiveFormsModule從@angular/forms像下面

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    ReactiveFormsModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }