英文:
Angular error - TypeError: Cannot read properties of undefined (reading 'Id')
问题
我正在尝试显示下拉列表中的值，这些值是从API响应中获取的。以下是我的HTML代码：
<th>
<select class="form-control" id="deviceTypeFilter" ngIf="deviceType" ng-options="deviceType for deviceType in vm.deviceTypes" ng-model="vm.selectedDeviceType" ng-change="vm.loadWithFilters()">
<option value=""></option>
</select>
</th>
相应的 TypeScript 文件：
export class FirmwaresController {
isLoading: boolean = false;
selectedDeviceType: string = null;
selectedTenant: Tenant;
deviceTypes: Array<string>;
firmwares: Array<any>;
firmwaresCnt: number;
private logger: ILogger;
constructor(private $stateParams: any,
logger: LoggerService,
private firmwareService: FirmwareService,
private applicationService: ApplicationService,
private modalService: ModalService,
private $window: any,
$scope: IScope) {
this.setFilterCollections();
this.loadFirmwares();
this.selectedDeviceType = $stateParams.deviceType;
this.applicationService.getCurrentTenant()
.then((tenant) => {
this.selectedTenant = tenant;
this.loadFirmwares();
})
.finally(() => this.isLoading = false);
this.logger = logger.getLogger('firmwares');
}
setFilterCollections() {
this.firmwareService.getDeviceTypes(this.selectedTenant.Id).then((response: any) => this.deviceTypes = response);
}
loadFirmwares() {
if (this.selectedDeviceType === null) {
return;
}
this.isLoading = true;
this.firmwares = new Array<any>();
this.firmwareService.getFirmwares(this.selectedTenant.Id, this.queryFilter)
.then((firmwares: Array<any>) => {
angular.forEach(firmwares, (firmware: any) => {
this.firmwares.push(firmware);
});
})
.finally(() => this.isLoading = false);
}
loadWithFilters() {
if (this.selectedTenant !== null) {
this.currentPage = 1; // resetting to page 1 to avoid RangeNotSatisfiable errors
this.loadFirmwares();
}
}
}
我收到以下错误消息：
TypeError: Cannot read properties of undefined (reading 'Id')
at FirmwaresController.setFilterCollections (
我是Angular新手，已经查看了一些文档并尝试了一些可能的解决方案，但不幸的是，我找不到根本原因。请帮我修复这个问题。提前感谢您的帮助。
英文:
I am trying to display the values in the dropdown from which the values are fetched from API response. Below is my html:
<th><select class="form-control" id="deviceTypeFilter" ngIf="deviceType" ng-options="deviceType for deviceType in vm.deviceTypes" ng-model="vm.selectedDeviceType" ng-change="vm.loadWithFilters()"><option value=""></option></select></th>
Respective ts. file :
export class FirmwaresController {
isLoading: boolean = false;
selectedDeviceType: string = null;
selectedTenant: Tenant;
deviceTypes: Array<string>;
firmwares: Array<any>;
firmwaresCnt: number;
private logger: ILogger;
constructor(private $stateParams: any,
logger: LoggerService,
private firmwareService: FirmwareService,
private applicationService: ApplicationService,
private modalService: ModalService,
private $window: any,
$scope: IScope) {
this.setFilterCollections();
this.loadFirmwares();
this.selectedDeviceType = $stateParams.deviceType;
this.applicationService.getCurrentTenant()
.then((tenant) => {
this.selectedTenant = tenant;
this.loadFirmwares();
})
.finally(() => this.isLoading = false);
this.logger = logger.getLogger('firmwares');
}
setFilterCollections() {
this.firmwareService.getDeviceTypes(this.selectedTenant.Id).then((response: any) => this.deviceTypes = response);
}
loadFirmwares() {
if (this.selectedDeviceType === null) {
return;
}
this.isLoading = true;
this.firmwares = new Array<any>();
this.firmwareService.getFirmwares(this.selectedTenant.Id, this.queryFilter)
.then((firmwares: Array<any>) => {
angular.forEach(firmwares, (firmwares: any) => {
this.firmwares.push(firmwares);
});
})
.finally(() => this.isLoading = false);
}
loadWithFilters() {
if (this.selectedTenant !== null) {
this.currentPage = 1; // resetting to page 1 to avoid RangeNotSatisfiable errors
this.loadFirmwares();
}
}
}
}
I get the error saying
TypeError: Cannot read properties of undefined (reading 'Id')
at FirmwaresController.setFilterCollections (
I am new to Angular, and have gone through few documents and have checked possible solution, unfortunely i am not able to find the root cause. Please help me to fix this. Thanks in advance.
答案1
得分: 0
问题出在你的setFilterCollections()函数中，它在初始化selectedTenant变量之前尝试访问它。
你必须在从promise中检索到所选租户的结果后调用这个方法：
this.applicationService.getCurrentTenant()
.then((tenant) => {
this.selectedTenant = tenant;
this.setFilterCollections();
this.loadFirmwares();
})
.finally(() => this.isLoading = false);
英文:
The problem comes from your setFilterCollections() that tried to access selectedTenant property before you initialize this variable.
You must call this method after the result of your promise that retrieve the selected tenant :
this.applicationService.getCurrentTenant()
.then((tenant) => {
this.selectedTenant = tenant;
this.setFilterCollections();
this.loadFirmwares();
})
.finally(() => this.isLoading = false);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论