Typescript-Angular 导出的枚举未定义

Question

I have an Angular project with some components and some enums. I was able to successfully use the enums in one of my components, but now that I try to do the same in other components, undefined is returned.

Component in which the enums work:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as moment from 'moment';
import { from } from 'rxjs';
import { WEEKLY_SMART_POINTS } from '../constants';
import { Activity } from '../dom/profile/Activity';
import { Gender } from '../dom/profile/Gender';
import { Goal } from '../dom/profile/Goal';
import { Profile } from '../dom/profile/Profile';
import { ProfileService } from '../services/profile.service';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],
})
export class ProfilePage implements OnInit {
  eGender = Gender;
  eActivity = Activity;
  eGoal = Goal;
  valid: boolean;

  currentProfile: Profile;
  savedProfile: Profile;

  constructor(private profileService: ProfileService, private router: Router) {
    this.currentProfile = this.createEmptyProfile();
    this.savedProfile = this.createEmptyProfile();
  }

  ionViewWillEnter() {
    this.currentProfile = this.createEmptyProfile();
    this.savedProfile = this.createEmptyProfile();
    from(this.profileService.loadSaved()).subscribe((profile) => {
      Object.assign(this.currentProfile, profile || this.createEmptyProfile());
      Object.assign(this.savedProfile, profile || this.createEmptyProfile());
    });
  }

  ngOnInit() {
    console.log(this.eGender); //this works
  }
...

Some components in which the enums return undefined:

import { Component, OnInit } from '@angular/core';
import { Portion } from '../dom/products/Portion';
import { Product } from '../dom/products/Product';
import { Nutrition } from '../dom/products/Nutrition';
import { Gender } from '../dom/profile/Gender';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.page.html',
  styleUrls: ['./calculator.page.scss'],
})
export class CalculatorPage implements OnInit {
  smartPoints: number | string = '-';

  nutrition: Nutrition;
  portion: Portion;
  product: Product;

  valid: boolean;

  eGender: Gender;

  constructor() {
    this.nutrition = this.createEmptyNutrition();
    this.portion = this.createEmptyPortion();
    this.product = this.createEmptyProduct();
  }

  ionViewWillEnter() {
    this.nutrition = this.createEmptyNutrition();
    this.portion = this.createEmptyPortion();
    this.product = this.createEmptyProduct();
  }

  ngOnInit() {
    console.log(this.eGender); //returns undefined
  }
...

/* eslint-disable no-underscore-dangle */
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Portion } from '../dom/products/Portion';
import { Product } from '../dom/products/Product';
import { SubSize } from '../dom/products/SubSize';
import { ProductService } from '../services/product.service';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.page.html',
  styleUrls: ['./product-detail.page.scss'],
})
export class ProductDetailPage implements OnInit {
  eSubSize: SubSize;
  product: Product;
  selectedSize: number;
  selectedSubSize: SubSize;
  selectedPortionId: string;

  constructor(
    private productService: ProductService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    console.log(this.eSubSize); //returns undefined
    this.getProduct();
  }

  sameOrder() {
    return 0;
  }

  private getDisplayPortion(): Portion {
    let portion: Portion;
    this.product.portions.forEach((p) => {
      if (p.default === true) {
        portion = p;
      }
    });
    return portion === undefined ? this.product.portions[0] : portion;
  }

  private async getProduct() {
    const id = this.route.snapshot.paramMap.get('id');
    this.product = await this.productService.getSystemProduct(id);
    const displayPortion = this.getDisplayPortion();
    this.selectedSize = displayPortion.size;
    this.selectedSubSize = SubSize.none;
    this.selectedPortionId = displayPortion._id;
  }
}

Some enums:

export enum Gender {
  m = 'Man',
  f = 'Vrouw',
}

export enum SubSize {
  none = '--',
  oneEight = '1/8',
  oneFourth = '1/4',
  oneThird = '1/3',
  threeEight = '3/8',
  half = '1/2',
  fiveEight = '5/8',
  twoThird = '2/3',
  threeForth = '3/4',
  sevenEight = '7/8',
}

I'm totally stuck, hopefully someone has the answer.

Answer 1

You used it correctly in ProfilePage .

eGender = Gender

On other faulty components, you just identified your type.;

eGender: Gender

eSubSize: SubSize

So you didn't assign a value to the variables. That's why it gives an undefined error.

So you should use = instead of :

eGender = Gender

eSubSize = SubSize