无法绑定到'ng模型'，因为它不是Angular 6中'input'的已知属性

Question

我正在使用Angular 6并试图呈现一个页面，我得到以下错误不能绑定到'ng模型'，因为它不是'input'的已知属性。我已经尝试了堆栈溢出中的所有选项。

以下是选择

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

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

我使用的是Visual Studio代码，当我点击一个特定的链接时，我得到了错误。请指导我。提前谢谢。

Answer 1

用ng-model代替[(ngModel)]解决了这一问题。