Question

我已经阅读了所有文章，并且对“Can't bind to 'ngModel' since it isn't a known property of 'input'”的解决方案似乎是将FormsModule添加到import和app.module.ts中的imports数组（应用程序中只有一个模块。 app.module.ts）。但是我已经尝试过了，还有多个排列，包括将它们导入到git-search-component.spec.ts中，以及导入ReactiveFormsModule等，但是没有任何效果，并且我的控制台中仍然出现"can't bind to ngModel . . ."错误。还有其他想法吗？

app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GitSearchService } from './git-search.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [GitSearchService],
  bootstrap: [AppComponent]
})
export class AppModule { }

git-search.component.html

<input name="query" placeholder="Enter Search Here" [(ngModel)]="qryString"/>
<button (click)="gitSearch()">Submit</button>
<div *ngIf="searchResults; else doElse">
  <h3 class="total">Total Results: {{searchResults.total_count}}</h3>
  <ul class="list">
    <li [ngStyle] = "{'background-color' : (i % 2 === 0) ? 'white' : 'silver' }" class="list_item" *ngFor = "let result of searchResults.items; index as i;">
      <a [href]="result.html_url">
        <img [src]="result.owner.avatar_url" class="avatar"/>
        <h4 class="title">
            {{result.name}}
            <small>by {{result.owner.login | uppercase}}</small>
        </h4>
      </a>
      <p class="description">
        {{result.description}}
      </p>
      <p>Created on: {{result.created_at | date:'fullDate'}}</p>
    </li>
  </ul>
</div>
<ng-template #doElse>Loading . . . </ng-template>

git-search.component.ts

import { Component, OnInit } from '@angular/core';
import { GitSearch, GitUsers } from '../git-search';
import { GitSearchService } from '../git-search.service';

@Component({
  selector: 'app-git-search',
  templateUrl: './git-search.component.html',
  styleUrls: ['./git-search.component.scss']
})
export class GitSearchComponent implements OnInit {
  searchResults: GitSearch;
  qryString: string;

  constructor(private gsService: GitSearchService) { }

  gitSearch = () => { 
    this.gsService.gitSearch(this.qryString).then( (response) =>
    this.searchResults = response,  
    (error) => 
    alert("Error: " + error.statusText));
  }

}

Answer 1

即使您具有所需的所有模块，我仍然看到声明数组中缺少该组件，请按如下所示进行更改，

@NgModule({
  declarations: [
    AppComponent,
    GitSearchComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [GitSearchService],
  bootstrap: [AppComponent]
})

Answer 2

尝试导入表单指令

ifconfig

并添加

import { FORM_DIRECTIVES } from '@angular/forms';

至指令

Answer 3

如果您使用反应式方法来处理表单，还需要在imports数组中添加ReactiveFormsModule。尝试添加它。

Answer 4

通过角度命令添加组件时，组件将自动注册到其各自的模块中

如@Sajeetharan

@NgModule({
 declarations: [
 AppComponent,
 GitSearchComponent
],
imports: [
 FormsModule,
 BrowserModule,
 AppRoutingModule,
 HttpClientModule
],
 providers: [GitSearchService],
 bootstrap: [AppComponent] 
})

仍然得到：“因为它不是'input'的已知属性，所以无法绑定到'ngModel'。”

4 个答案: