自动完成材料角度2实现误差

Question

当我在material design上用autocomplete实现时，我有一个关于angular 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)

Answer 1

导入formsmodule，reactiveformsmodule，从@Angulation/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 { }