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>

在组件类中：

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有什么问题？

Answer 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;。正如我在评论中所写的那样-“我认为这与组件的上下文有关，因为该类与模板相关联”。不仅是enum的情况，而且无论您在组件类外部声明什么，例如const someNumber = 35;，{{someNumber}}都无法在模板中访问它。遇到此问题时，我发现这是关于上下文的，但是如果有其他原因或其他原因，请纠正我。

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

1 个答案: