无法绑定到'ngModel',因为它不是'textarea'的已知属性

时间:2017-07-14 09:11:16

标签: angular typescript jasmine karma-runner

使用Jasmine测试运行Karma时收到以下错误:

无法绑定到'ngModel',因为它不是'textarea'的已知属性。

虽然,我已在app.module中导入了FormsModule,但我已将FormsModule添加到testBed。

应用程序本身正常工作,只有在运行Karma时才会出现此问题。

应用程序中没有子模块。

我使用Angular 4.0.0和Angular CLI 1.0.4。

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    NoteComponent,
    NotesListComponent,
    AddNoteButtonComponent,
    AboutComponent,
    NoteWrapperComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    CommonModule,
    RouterModule.forRoot([ /** Rest of the code... **/

note.component.html

<textarea title="" class="no-extra n-note__textarea n-note__textarea--transparent" [(ngModel)]="note.description"
              name="description" (blur)="updateNote($event)">
      {{note.description}}
    </textarea>

note.component.spec.js

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpModule } from '@angular/http';

import { expect, assert } from 'chai';

import { NoteComponent } from './note.component';
import { Note } from './note';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';


describe('NoteComponent', () => {
  let component: NoteComponent;
  let fixture: ComponentFixture<NoteComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [NoteComponent],
      imports: [HttpModule, BrowserModule, CommonModule, FormsModule],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NoteComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be defined', () => {
    assert.isDefined(NoteComponent);
  });

  it('should be created', () => {
    expect(component).to.be.an('object');
  });

  describe('public API', () => {
    const note: Note = new Note(1, '', '');

    it('markAsDone method should set done parameter to true', () => {
      component.note = note;
      component.markAsDone();
      expect(note._done).to.be.true;
    });

    it('markAsDiscarded method should set discarded parameter to true', () => {
      component.note = note;
      component.markAsDiscarded();
      expect(note._deleted).to.be.true;
    });

    it('markAsStarred method should set starred parameter to true', () => {
      component.note = note;
      component.markAsStarred();
      expect(note._starred).to.be.true;
    });
  });
});

1 个答案:

答案 0 :(得分:0)

注意我看到你已经这样做了,但是,这解决了我的问题。

在我的规范中,我补充道:

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

然后将FormsModule添加到文本床配置的导入部分。