[解決済み] angular2のテスト。ngModel' は 'input' の既知のプロパティではないので、バインドできない
2022-07-24 05:04:19
質問
私は、angular2 の双方向バインディングをテストしようとしています。
input
. 以下はエラーです。
Can't bind to 'ngModel' since it isn't a known property of 'input'.
app.component.htmlは
<input id="name" type="text" [(ngModel)]="name" />
<div id="divName">{{name}}</div>
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
name: string;
}
app.component.spec.ts
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { AppService } from './app.service';
describe('App: Cli', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
providers:[AppService]
});
});
it('divName', async(() => {
let fixture = TestBed.createComponent(AppComponent);
let comp = fixture.componentInstance;
comp.name = 'test';
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('divName').textContent).toContain('test');
}));
});
どのように解決するのですか?
をインポートする必要があります。
FormsModule
を
TestBed
の設定に追加します。
import { FormsModule } from '@angular/forms';
TestBed.configureTestingModule({
imports: [ FormsModule ],
declarations: [
AppComponent
],
providers:[AppService]
});
でやっていることは
TestBed
でやっていることは、テスト環境のために NgModule をゼロから構成することです。これによって、テストに影響を与える可能性のある不要な外部変数を持たずに、テストに必要なものだけを追加することができます。
関連
-
[解決済み】「ルーターリンク」は既知のプロパティではないため、バインドできない
-
[解決済み] ngModel' は 'input' の既知のプロパティではないため、バインドできません。
-
[解決済み] formGroup' は 'form' の既知のプロパティではないため、バインドできません。
-
[解決済み] Angularのエラーです。"Can't bind to 'ngModel' because it isn't a known property of 'input'"."
-
[解決済み] 例外が発生しました。既知のネイティブプロパティではないため、'ngFor'にバインドできない
-
[解決済み】'formControl'は'input'の既知のプロパティではないのでバインドできない - Angular2 Material Autocomplete問題
-
[解決済み】Angularの例外。ngForIn'は既知のネイティブプロパティではないため、バインドできない
-
[解決済み】Angular2 Exception: routerLink'が既知のネイティブプロパティではないため、バインドできない。
-
[解決済み] Angular 2:'ngModel'が'input'の既知のプロパティではないため、バインドできない。
-
[解決済み] SpockテストフレームワークにおけるMock/Stub/Spyの相違点
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン