Angular Can'；t绑定到'；ngModel'；因为它不是'；t'的已知属性；输入'；角度6

我正在使用Angular 6并试图呈现一个页面，我发现以下错误无法绑定到“ngModel”，因为它不是“input”的已知属性。我已经尝试了在堆栈溢出中可以找到的所有选项

以下是选项

1） 在导入中包括app.module.ts中的FormsModule

2） 在html文件中使用[（ngModel）]

3） 将“@angular/http”：“^6.0.0”的版本号更改为不同版本，如“@angular/http”：“^6.0.1”和其他6个版本

*.component.html

<div [@routerTransition]>
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Program Name <input [(ngModel)]="programName" class="form-control" type="text" name="{{programName}}" /></th>
            <th>Start Date   <input [(ngModel)]="startDate" class="form-control" type="text" name="{{startDate}}" /></th>
            <th>End Date <input [(ngModel)]="endDate" class="form-control" type="text" name="{{endDate}}" /></th>
            <th></th>
        </tr>
    </thead>
  <thead>
      <tr>
          <th>Category Name</th>
          <th>Max Points</th>
          <th>Max Score</th>
          <th>Action</th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let program of programCategorys; let i = index">
          <td>
              <input [(ngModel)]="program.categoryName" class="form-control" type="text" name="{{program.categoryName}}" />
          </td>
          <td>
              <input [(ngModel)]="program.maxPoints" class="form-control" type="text" name="{{program.maxPoints}}" />
          </td>
          <td>
              <input [(ngModel)]="program.maxScore" class="form-control" type="text" name="{{program.maxScore}}" />
          </td>
          <td>
              <button class="btn btn-default"  type="button" (click)="deleteFieldValue(i)">Delete</button>
          </td>
      </tr>
      <tr>
          <td>
              <input class="form-control" type="text" id="newAttributeCode" [(ngModel)]="newAttribute.categoryName" name="newAttributeCode" />
          </td>
          <td>
              <input class="form-control" type="text" id="newAttributeName" [(ngModel)]="newAttribute.maxPoints" name="newAttributeName" />
          </td>
          <td>
              <input class="form-control" type="text" id="newAttributePrice" [(ngModel)]="newAttribute.maxScore" name="newAttributePrice" />
          </td>
          <td>
              <button class="btn btn-default" type="button" (click)="addFieldValue()">+</button>
          </td>
      </tr>
  </tbody>
</table>
<div class="container" >
<div class="row" >
    <div class="col-md-3"  >
        <button class="btn btn-default" type="button" (click)="pgSave()">Save</button>

    </div>
    <div class="col-md-3"  >
        <button class="btn btn-default" type="button" (click)="pgSubmit()">Submit</button>

    </div>
    <div class="col-md-3"  >
        <button class="btn btn-default" type="button" (click)="pgCancel()">Cancel</button>

    </div>
</div>
</div>

</div>

---

我使用的是Visual Studio代码，单击特定链接时出现错误。请指导我。提前感谢。

通过使用ng模型而不是[（ngModel）]…

解决了此问题。

您是否在app.module.ts中导入了FormsModule？是的，我使用过。请同时包含app.module.ts文件。另外，在应用程序的引导过程中是否报告了任何错误？包括app.module.ts。请在此处创建一个工作片段：。这将更容易发现错误并提供帮助

import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './shared';
import { FormsModule } from '@angular/forms';

// AoT requires an exported function for factories
export const createTranslateLoader = (http: HttpClient) => {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
};

@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader,
                deps: [HttpClient]
            }
        }),
        AppRoutingModule
    ],
    declarations: [AppComponent],
    providers: [AuthGuard],
    bootstrap: [AppComponent]
})
export class AppModule {}