Angular 使用枚举值时 ngClass 不工作

Question

我正在使用 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>

组件内部的class:

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 上方 class 的同一文件中声明枚举的方式（如果没有编译错误就无法在它之后声明），正确的方法它，因为它应该是这个组件私有的？

2) ngClass 有什么问题？

Answer 1

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

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

2) 在您的 class 中添加此行：GameMode = GameMode;。正如我在评论中所写 - "I believe it's about context of component since that class is connected with template"。这不仅是 enum 的情况，而且无论您在外部组件 class 中声明什么，例如 const someNumber = 35;，它都无法通过 {{someNumber}} 在模板中访问。当我遇到这个问题时，我发现这是关于上下文的，但如果有不同的原因或其他原因，请纠正我。

Angular 使用枚举值时 ngClass 不工作

Angular ngClass not working when using enum values

angular

angular7

ng-class