英文:
Angular component property with type DataBindingDirective has no initializer and is not definitely assigned in the constructor
问题
我遇到了编译错误：
类型为DataBindingDirective的属性没有初始化程序，并且在构造函数中没有明确分配。
@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;
~~~~~~~~~~~
我怀疑这可能与包版本有关，因为在StackBlitz上一切正常（工作示例：StackBlitz）。
更大的代码块：
export class NPEComponent implements OnInit {
rowData$: Observable<Array<NPE>> = of([]);
public filter$: Observable<CompositeFilterDescriptor | null>;
@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective; // 编译错误在这里
constructor(private activatedRoute: ActivatedRoute) {
this.filter$ = this.activatedRoute.queryParams.pipe(
map(params => params['name']),
distinctUntilChanged(),
map(searchTerm => {
if (!searchTerm) return null;
return (<CompositeFilterDescriptor>{
logic: 'or',
filters: [buildFilterItem('organizationName', searchTerm)]
})
});
}
ngOnInit(): void {
this.rowData$ = this.NPEService.apiNPEGet();
}
packages.json中的版本信息：
"dependencies": {
"@angular/animations": "~13.3.5",
"@angular/common": "~13.3.5",
"@angular/compiler": "~13.3.5",
"@angular/core": "~13.3.5",
"@angular/forms": "~13.3.5",
"@angular/localize": "~13.3.5",
"@angular/platform-browser": "~13.3.5",
"@angular/platform-browser-dynamic": "~13.3.5",
"@angular/platform-server": "~13.3.5",
"@angular/router": "~13.3.5",
// 其他依赖项...
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.3.4",
"@angular/cli": "~13.3.4",
"@angular/compiler-cli": "~13.3.5",
// 其他开发依赖项...
}
PowerShell中的版本信息：
> ng --version
Angular CLI: 13.3.10
Node: 18.13.0 (不受支持)
Package Manager: npm 8.19.3
OS: win32 x64
Angular: 13.3.12
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1303.10
@angular-devkit/build-angular 13.3.10
@angular-devkit/core 13.3.10
@angular-devkit/schematics 13.3.10
@angular/cli 13.3.10
@schematics/angular 13.3.10
rxjs 7.5.7
typescript 4.6.4
英文:
I'm getting compilation error:
Property with type DataBindingDirective has no initializer and is not definitely assigned in the constructor.
@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;
~~~~~~~~~~~
I suspect that it maybe related to the packages versions, because at stackblitz everything working fine (working example: StackBlitz ).
Bigger chunk of code:
export class NPEComponent implements OnInit {
rowData$: Observable<Array<NPE>> = of([]);
public filter$: Observable<CompositeFilterDescriptor | null>;
@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective; // compilation error here
constructor(private activatedRoute: ActivatedRoute) {
this.filter$ = this.activatedRoute.queryParams.pipe(
map(params => params['name']),
distinctUntilChanged(),
map(searchTerm => {
if (!searchTerm) return null;
return (<CompositeFilterDescriptor>{
logic: 'or',
filters: [ buildFilterItem('organizationName', searchTerm) ]
})
}),
//tap(() => console.log('filter been assigned')),
//tap(() => this.dataBinding.skip = 0),
);
}
ngOnInit(): void {
this.rowData$ = this.NPEService.apiNPEGet();
}
versions from packages.json :
"dependencies": {
"@angular/animations": "~13.3.5",
"@angular/common": "~13.3.5",
"@angular/compiler": "~13.3.5",
"@angular/core": "~13.3.5",
"@angular/forms": "~13.3.5",
"@angular/localize": "~13.3.5",
"@angular/platform-browser": "~13.3.5",
"@angular/platform-browser-dynamic": "~13.3.5",
"@angular/platform-server": "~13.3.5",
"@angular/router": "~13.3.5",
"@ng-idle/core": "^11.1.0",
"@ng-idle/keepalive": "^11.0.3",
"@ngrx/effects": "^13.2.0",
"@ngrx/router-store": "^13.2.0",
"@ngrx/store": "^13.2.0",
"@ngrx/store-devtools": "^13.2.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"@progress/kendo-angular-buttons": "^8.1.0",
"@progress/kendo-angular-common": "^3.2.1",
"@progress/kendo-angular-dateinputs": "^7.1.2",
"@progress/kendo-angular-dialog": "^7.0.0",
"@progress/kendo-angular-dropdowns": "^7.2.1",
"@progress/kendo-angular-excel-export": "^5.0.1",
"@progress/kendo-angular-grid": "^7.3.3",
"@progress/kendo-angular-indicators": "^3.0.2",
"@progress/kendo-angular-inputs": "^10.1.0",
"@progress/kendo-angular-intl": "^4.1.0",
"@progress/kendo-angular-l10n": "^4.0.0",
"@progress/kendo-angular-label": "^4.0.1",
"@progress/kendo-angular-layout": "^7.2.0",
"@progress/kendo-angular-notification": "^4.0.1",
"@progress/kendo-angular-pdf-export": "^4.0.0",
"@progress/kendo-angular-popup": "^5.0.0",
"@progress/kendo-angular-tooltip": "^4.1.1",
"@progress/kendo-angular-treeview": "^7.1.3",
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-drawing": "^1.17.1",
"@progress/kendo-licensing": "^1.3.0",
"@progress/kendo-theme-default": "^5.0.0",
"bootstrap": "^5.1.3",
"jquery": "^3.6.0",
"oidc-client": "^1.11.5",
"popper.js": "^1.16.0",
"run-script-os": "^1.1.6",
"rxjs": "~7.5.5",
"tslib": "^2.4.0",
"zone.js": "~0.11.5"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.3.4",
"@angular/cli": "~13.3.4",
"@angular/compiler-cli": "~13.3.5",
"@ngrx/schematics": "^13.2.0",
"@types/jasmine": "~4.0.3",
"@types/jasminewd2": "~2.0.10",
"@types/node": "^17.0.29",
"jasmine-core": "~4.1.0",
"karma": "~6.3.19",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.0.0",
"karma-jasmine-html-reporter": "^1.7.0",
"schematics-scss-migrate": "^1.3.15",
"typescript": "~4.6.3"
}
}
In PowerShell:
>ng --version
Angular CLI: 13.3.10
Node: 18.13.0 (Unsupported)
Package Manager: npm 8.19.3
OS: win32 x64
Angular: 13.3.12
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1303.10
@angular-devkit/build-angular 13.3.10
@angular-devkit/core 13.3.10
@angular-devkit/schematics 13.3.10
@angular/cli 13.3.10
@schematics/angular 13.3.10
rxjs 7.5.7
typescript 4.6.4
答案1
得分: 1
描述的行为与TypeScript的严格配置相关。避免此错误的一种简单方法是使用非空断言运算符 "!"：
@ViewChild(DataBindingDirective) dataBinding!: DataBindingDirective;
在StackBlitz中不存在此错误，因为项目在tsconfig.json文件中缺少严格类型检查配置。
英文:
The described behavior is related to a TypeScript strict configuration.One simple way to avoid it will be to place an non-null assertion operator "!":
@ViewChild(DataBindingDirective) dataBinding!: DataBindingDirective;
The error isn't present in StackBlitz as the project is missing the strict type check configurations in the tsconfig.json file.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论