Angular error - TypeError: Cannot read properties of undefined (reading 'Id')

Question

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.

Answer 1

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);