TypeError：无法读取未定义的属性“获取”（修复冲突导入不起作用）
Posted
技术标签:
【中文标题】TypeError：无法读取未定义的属性“获取”（修复冲突导入不起作用）【英文标题】：TypeError: Cannot read property 'get' of undefined (Fixed conflicting imports not working) 【发布时间】：2020-03-07 09:09:17 【问题描述】：尝试运行 karma TS 规范文件时出错。所有模块和导入似乎都工作正常，没有冲突。尝试将component.ngOninit() 添加到 beforeEach() 和 it() 中但没有任何成功。查看类似问题与 HttpClientTestingModule 导入冲突或其他提供程序/声明冲突有关。我无法确定为什么 TypeError: Cannot read property 'get' of undefined is not allowed this spec file to pass
规格文件
import async, ComponentFixture, TestBed from '@angular/core/testing';
import AcaPersonComponent from './aca-person.component';
import
MatCardModule, MatDividerModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatOptionModule,
MatRadioModule,
MatSelectModule
from '@angular/material';
import ReactiveFormsModule from '@angular/forms';
import MFGDatePickerModule from 'mfg-datepicker';
import TextMaskModule from 'angular2-text-mask';
import AppRoutingModule from '../../../../../app-routing.module';
import HttpClientTestingModule from '@angular/common/http/testing';
import BrowserAnimationsModule from '@angular/platform-browser/animations';
import LandingPageComponent from '../../../../../landing-page/landing-page.component';
describe('AcaPersonComponent', () =>
let component: AcaPersonComponent;
let fixture: ComponentFixture<AcaPersonComponent>;
beforeEach(async(() =>
TestBed.configureTestingModule(
declarations: [
AcaPersonComponent,
LandingPageComponent],
imports: [MatFormFieldModule,
ReactiveFormsModule,
MatIconModule,
MatInputModule,
MFGDatePickerModule,
MatOptionModule,
MatSelectModule,
MatRadioModule,
MatCardModule,
TextMaskModule,
AppRoutingModule,
BrowserAnimationsModule,
HttpClientTestingModule,
MatDividerModule
]
)
.compileComponents();
));
beforeEach(() =>
fixture = TestBed.createComponent(AcaPersonComponent);
component = fixture.componentInstance;
fixture.detectChanges();
component.ngOnInit();
);
it('should create', () =>
expect(component).toBeTruthy();
component.ngOnInit();
);
);
错误
TypeError: Cannot read property 'get' of undefined
error properties: Object( ngDebugContext: DebugContext_( view: Object( def: Object( factory: Function, nodeFlags: 33669121, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object( nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 114688, directChildFlags: 114688, childMatchedQueries: 0, matchedQueries: Object( ), matchedQueryIds: 0, references: Object( ), ngContentIndex: null, childCount: 1, bindings: [ ], bindingFlags: 0, outputs: [ ], element: Object( ns: '', name: 'app-aca-person', attrs: [ ], template: null, componentProvider: Object( nodeIndex: 1, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 114688, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex: -1, childCount: 0, bindings: Array, bindingFlags: 0, outputs: ...
at <Jasmine>
at AcaPersonComponent.get type [as type] (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:70:28)
at AcaPersonComponent.ngOnInit (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:24:14)
at checkAndUpdateDirectiveInline (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:31909:1)
at checkAndUpdateNodeInline (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:44366:1)
at checkAndUpdateNode (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:44305:1)
at debugCheckAndUpdateNode (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:45327:36)
at debugCheckDirectivesFn (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:45270:1)
at Object.eval [as updateDirectives] (ng:///DynamicTestModule/AcaPersonComponent_Host.ngfactory.js:7:5)
at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:45258:1)
at checkAndUpdateView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:44270:1)
TypeError: Cannot read property 'get' of undefined
at <Jasmine>
at AcaPersonComponent.get type [as type] (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:70:28)
at AcaPersonComponent.ngOnInit (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:24:14)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.spec.ts:58:15)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:365:1)
at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:305:1)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
at Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:124:1)
at runInTestZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:554:1)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:569:1)
at <Jasmine>
TS类
import Component, EventEmitter, Input, OnInit, Output from '@angular/core';
import FormGroup, Validators from '@angular/forms';
import merge from 'rxjs';
@Component(
selector: 'app-aca-person',
templateUrl: './aca-person.component.html',
styleUrls: ['./aca-person.component.css']
)
export class AcaPersonComponent implements OnInit
@Input() personType: string;
@Input() peopleForm: FormGroup;
@Input() nextWasClicked: boolean;
@Input() index: number;
@Output() removePerson = new EventEmitter<boolean>();
cardTitle: string;
personAge: number;
constructor()
ngOnInit()
if (this.type.value == 'primary')
this.cardTitle = 'Your Information';
else if (this.type.value == 'spouse')
this.cardTitle = 'Spouse';
else if (this.type.value == 'dependent')
this.cardTitle = 'Dependent';
this.dobAndIsPregnantVC();
dobAndIsPregnantVC()
merge(
this.dob.valueChanges,
this.gender.valueChanges
)
.subscribe(() =>
this.calculateAge(this.dob.value);
if (this.gender.value == 'F')
this.is_pregnant.setValidators(Validators.required);
if (this.personAge < 14)
this.is_pregnant.setValue(null);
this.is_pregnant.clearValidators();
else
this.is_pregnant.setValue(null);
this.is_pregnant.clearValidators();
this.is_pregnant.updateValueAndValidity();
);
// Calculate the age of the client from their birth date to display in the census details
private calculateAge(date: string)
if (date)
const timeDiff = Math.abs(Date.now() - new Date(date).getTime());
this.personAge = Math.floor(timeDiff / (1000 * 3600 * 24) / 365.25);
onRemovePerson()
this.removePerson.emit(true);
// GETTERS
get type()
return this.peopleForm.get('type');
get first_name()
return this.peopleForm.get('first_name');
get last_name()
return this.peopleForm.get('last_name');
get gender()
return this.peopleForm.get('gender');
get dob()
return this.peopleForm.get('dob');
get uses_tobacco()
return this.peopleForm.get('uses_tobacco');
get affordable_care()
return this.peopleForm.get('affordable_care');
get is_pregnant()
return this.peopleForm.get('is_pregnant');
【问题讨论】：
【参考方案1】：它的发生是因为您的测试用例中没有定义@Input，因此您需要按如下方式创建它：
beforeEach(() =>
fixture = TestBed.createComponent(AcaPersonComponent);
component = fixture.componentInstance;
component.peopleForm = fb.group(
type: ['Other Name', Validators.required],
first_name: ['f_name', Validators.required],
//.. and so on for all params
);
component.personType = 'Some Type';
component.nextWasClicked = true;
component.index = 1; // or whatever is required
fixture.detectChanges();
);
这将帮助您定义this.peopleForm，因此像this.peopleForm.get('type'); 这样的行不会出现此类错误
不用加component.ngOnInit()
【讨论】：
以上是关于TypeError：无法读取未定义的属性“获取”（修复冲突导入不起作用）的主要内容，如果未能解决你的问题，请参考以下文章
使用 Sequelize 获取“TypeError：无法读取未定义的属性‘findAll’”
TypeError：无法读取未定义的属性“获取”（Node.js）
无法从 nextjs 中的 api 获取图像-TypeError：无法读取未定义的属性（读取“地图”）NEXTJS