Autocomplete Material Angular 2 Implementierung Fehler

Question

Ich habe einen Fehler in Bezug auf die Winkel 2, wenn ich mit Autocomplete auf Material-Design implementieren, und ich habe keine Ahnung, warum, weil es mein erstes Mal es mit Backend asp.net Kern implementieren. Ich habe versucht, einige der ng2-Bibliotheken zu installieren, funktioniert aber überhaupt nicht. Hier ist mein Code unten:

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

Und der Fehler wie unten folgt:

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)

Ich weiß nicht, was los ist, aber ich folgte die Schritte in angular material design autocomplete component, aber es scheint nicht zu mir zu arbeiten.

Kann jemand dieses Problem beheben? Und kann mir jemand mit meinem Code helfen? Ich bin gerade dabei, dieses Problem für fast 3 Stunden zu beheben.

Vielen Dank und einen schönen Tag!

Answer 1

Import FormsModule, ReactiveFormsModule von @angular/forms wie unter

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