使用枚举值时，Angular ngClass 不起作用答案

【问题标题】：Angular ngClass not working when using enum values使用枚举值时，Angular ngClass 不起作用
【发布时间】：2019-05-07 07:15:29
【问题描述】：

我正在使用 Angular 7。

我得到了这个 HTML：

<section class="carddiv">
    <section class="gameMessages">
       <p [ngClass] ="{'messageMiddleOfGameNoPairs' : gameModeVar === GameMode.NONE_SELECTED || gameModeVar === GameMode.ONE_SELECTED,
                    'messageSuccess' : gameModeVar === GameMode.TWO_SELECTED_SUCCESS || gameModeVar === GameMode.GAME_OVER,
                    'messageFailure' : gameModeVar === GameMode.TWO_SELECTED_FAILURE}"> {{currentMoveMessage}} </p>
    </section>
....
</section>

在组件的类中：

enum GameMode
{
    NONE_SELECTED = 0,
    ONE_SELECTED = 1,
    TWO_SELECTED_SUCCESS = 2,
    TWO_SELECTED_FAILURE = 3,
    GAME_OVER = 4
};

@Component({
  selector: 'app-cardcomponent',
  templateUrl: './cardcomponent.component.html',
  styleUrls: ['./cardcomponent.component.css'],
})

export class CardcomponentComponent implements OnInit 
{
  currentMoveMessage: string;
  gameModeVar : GameMode;

  constructor(public cardService: CardService) 
  { 
    this.currentMoveMessage = "message";
    this.gameModeVar = GameMode.NONE_SELECTED;
...
}

当我加载页面时，由于ngClass，没有呈现任何内容。如果我使用枚举的数值，这意味着在 HTML 中我将 gameModeVar 的比较更改为 gameModeVar === 1 而不是 gameModeVar === GameMode.ONE_SELECTED（但对于所有值，而不仅仅是 1），它确实有效。

1) 是我在 @Component 上方的类的同一文件中声明枚举的方式（它不能在没有编译错误的情况下声明），正确的方法是这样做的，因为它应该是这个组件私有的吗？

2) ngClass 有什么问题？

【问题讨论】：

添加类GameMode = GameMode;
你能发帖stackblitz 有问题吗？
@Buczkowski 为什么这条线实际上解决了问题 2？它有什么作用？
@YonatanNir 我相信这是关于组件的上下文，因为该类与模板相关。
@Buczkowski 如果您可以在答案中同时回答我的问题 1 和 2（都需要），我会接受它作为正确答案

标签： angular angular7 ng-class

【解决方案1】：

1) enum 不能真正私有，但我认为你所拥有的很好，因为你没有导出它，它只能通过该组件的实例访问。我想到的另一个想法可能是像这个枚举这样的简单对象，公共对象或者私有对象，可以使用 getter (get) 访问它。

  GameMode = {
    NONE_SELECTED: 0,
    ONE_SELECTED: 1,
    TWO_SELECTED_SUCCESS: 2,
    TWO_SELECTED_FAILURE: 3,
    GAME_OVER: 4
  };

2) 在您的课程中添加这一行：GameMode = GameMode;。正如我在 cmets 中所写的那样——“我相信它与组件的上下文有关，因为该类与模板相关联”。这不仅适用于enum，而且无论您在组件类之外声明什么，例如const someNumber = 35;，{{someNumber}} 都无法在模板中访问它。当我遇到这个问题时，我发现这是关于上下文的，但如果有其他原因或其他原因，请纠正我。

【讨论】：