Angular 4.x - 无法绑定到“ngModel”，因为它不是“输入”的已知属性

Posted 2023-03-13

【中文标题】Angular 4.x - 无法绑定到“ngModel”，因为它不是“输入”的已知属性

【英文标题】：Angular 4.x - Can't bind to 'ngModel' since it isn't a known property of 'input'

【发布时间】：2017-11-30 23:33:50

【问题描述】：

我在 app.module 中同时导入了 FormsModule 和 ReactiveFormsModule，希望 html 正确，

error

import

**Inside app.module:**
@NgModule( 
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ReactiveFormsModule,
RouterModule.forRoot(ROUTES,  useHash: true )
],
)



**My HTML:**
<div class="col-xs-12">
<input #searchTextBox type="text" class="validate filter-input" [(ngModel)]="query" (keyup)="onKeyup(searchTextBox.value)">
  <div class="suggestions" *ngIf="filteredList.length > 0">
    <ul *ngFor="let item of filteredList">
      <li>
        <a (click)="select(item)">item</a>
      </li>
    </ul>
  </div>

我在运行 npm run test:local 时收到此错误，但如果我执行 npm start，它运行正常。我使用了多个 [(ngModel)]，它们都有同样的问题，我只是用这个为例。

我该如何解决这个问题？

【问题讨论】：

在DynamicTestModule中导入FormsModule

Angular 2: Can't bind to 'ngModel' since it isn't a known property of 'input'的可能重复

【参考方案1】：

我们遇到了同样的问题，只是导入 FormsModule 不起作用。 在出错的地方使用这个标签 - [ngModelOptions]="standalone: true"

将以下内容添加到您的 .component.html 中可以像在登录屏幕上为我们所做的那样解决问题 -

示例：

<input [(ngModel)]='this.userId' [ngModelOptions]="standalone: true" placeholder="User Id" class="inputstyle">