반응형
각도 2 검정:'input'의 알려진 속성이 아니므로 'ngModel'에 바인딩할 수 없습니다.
제어를 위해 각도 2 양방향 바인딩을 테스트하려고 합니다.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을 사용해야 했습니다.다음 링크를 확인하십시오.
요약하자면, [value]를 사용하여 텍스트 필드에 대한 모델을 이렇게 바인딩했습니다.
([value])="searchTextValue"
또한 날짜 필드를 사용하는 경우 html에서 모델 int.를 바인딩해야 합니다.
(dateSelect)="onDateSelect($event)"
형식 스크립트에서 다음 코드를 사용합니다.이것은 NGB 달력 보기를 사용하는 경우에만 적용됩니다.
onDateSelect(event) {
let year = event.year;
let month = event.month <= 9 ? '0' + event.month : event.month;;
let day = event.day <= 9 ? '0' + event.day : event.day;;
let finalDate = year + "-" + month + "-" + day;
this.finalDateVlaue = finalDate;
}
언급URL : https://stackoverflow.com/questions/39584534/angular2-testing-cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-in
반응형
'programing' 카테고리의 다른 글
| Bash 스크립트에서 현재 디렉토리 변경 (0) | 2023.05.07 |
|---|---|
| C#에서 Final/Disposure 방법 사용 (0) | 2023.05.07 |
| MDF 파일이란? (0) | 2023.05.07 |
| Python3에서 인덱스별로 dict_keys 요소 액세스 (0) | 2023.05.07 |
| 문 인쇄를 사용하여 VARCHAR(MAX)를 인쇄하는 방법은 무엇입니까? (0) | 2023.05.07 |