Angular ngClass не работает при использовании значений перечисления - PullRequest
Новая
       36

Angular ngClass не работает при использовании значений перечисления

0 голосов
/ 07 мая 2019

Я использую 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) Это способ, которым я объявляю enum внутри того же файла класса над @Component (он не может быть объявлен после него без ошибки компиляции), правильный способ сделать это, как это должно бытьдля этого компонента?

2) В чем проблема с ngClass?

1 Ответ

0 голосов
/ 07 мая 2019

1) enum не может быть действительно приватным, но я думаю, что у вас все хорошо, так как вы не экспортируете его, и оно доступно только через экземпляр этого компонента. Еще одна идея, которая приходит мне в голову, может быть простым объектом, подобным этому 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}}. Когда я столкнулся с этой проблемой, я обнаружил, что это связано с контекстом, но если есть другая причина или что-то еще, пожалуйста, исправьте меня.

...