自动完成材料 Angular 2 实施错误

Posted 2023-02-22

【中文标题】自动完成材料 Angular 2 实施错误

【英文标题】：Autocomplete Material Angular 2 implementation Error

【发布时间】：2017-11-10 03:43:17

【问题描述】：

当我在 Material Design 上实现自动完成时，我在 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)

我不知道发生了什么，但我按照angular material design autocomplete component 中的步骤操作，但对我来说似乎不起作用。

有谁知道如何解决这个问题？有人可以帮我写代码吗？我是新手，现在花了将近 3 个小时来解决这个问题。

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

【问题讨论】：

你导入ReactiveFormsModule了吗？

Can't bind to 'formControl' since it isn't a known property of 'input' - angular2 material Autocomplete issue的可能重复

还没有...hmp...你能告诉我如何导入反应模块吗？

angular.io/docs/ts/latest/cookbook/…

你知道为什么会出现错误TypeError: this.filterUserAccount is not a function 你知道为什么会这样吗？

【参考方案1】：

从@angular/forms 导入FormsModule, ReactiveFormsModule，如下所示

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