Typescript-Angular 導出的枚舉未定義

Question

我有一個 Angular 項目，其中包含一些組件和一些枚舉。 我能夠在我的一個組件中成功使用枚舉，但現在我嘗試在其他組件中做同樣的事情，返回未定義。

枚舉在其中工作的組件：

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
  }
...

枚舉返回未定義的一些組件：

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

一些枚舉：

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',
}

我完全被困住了，希望有人能給出答案。

Answer 1

您在ProfilePage中正確使用了它。

eGender = Gender

在其他有故障的組件上，您只是確定了您的類型。

eGender: Gender

eSubSize: SubSize

所以你沒有為變量賦值。 這就是它給出未定義錯誤的原因。

所以你應該使用=而不是:

eGender = Gender

eSubSize = SubSize