как добавить класс динамически?

Я недолго программировал на Angular и застрял на дизайне кнопок. Я уже реализовал их с помощью ngIf, динамически появляясь и исчезая в зависимости от того, были ли они доступны или нет. Дело в том, что я нахожу это немного сложным, и я хотел воспользоваться той же логикой, чтобы они всегда отображались на экране, но добавляли цвет в зависимости от того же условия, которое я использовал раньше. Я пытался реализовать использование ngClass, но ясно, что что-то не так, потому что он не работает. вот мой html:

<div *ngIf="mainFlowchartInstance.eisChartData.value" class="temp_zoom-actions">
      <div [ngClass]="{'orangeText' : zoomButtons == 'zoomButtons.reset'}" class="center" (click)="zoomReset()"><i class="icon-refresh"></i></div>
      <div [ngClass]="{'orangeText' : zoomButtons == 'zoomButtons.out'}" class="zoom-out" (click)="zoomOut()"><i class="icon-search-minus"></i></div>
      <div [ngClass]="{'orangeText' : zoomButtons == 'zoomButtons.in'}" class="zoom-in" (click)="zoomIn()"><i class="icon-search-plus"></i></div>
</div>

а вот мой тс:

  public zoomButtons = {
    in: false,
    out: true,
    reset: false
  };


  setZoomButtonsState() {
    this.zoomButtons.out = !!this.currentZoomPosition;
    this.zoomButtons.in = this.zoomButtons.reset = !(this.currentZoomPosition === this.rangeZooms.length - 1);
  }

Кто-то, чтобы заставить меня увидеть мою ошибку? Заранее спасибо.


angular dynamic angular7 ng-class
person homerThinking    schedule 10.02.2020    source источник
comment
удалите ' в условии: {'orangeText' : zoomButtons == zoomButtons.reset}. иначе Angular ожидает строку   -  person Eliseo    schedule 10.02.2020
comment
Отвечает ли это на ваш вопрос? Динамическая установка стиля в Angular   -  person maury844    schedule 10.02.2020

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте использовать его таким образом (проверьте, являются ли zoomButtons.reset или zoomButtons.out или zoomButtons.in true или false, затем примените класс orangeText):

<div [ngClass]="{'orangeText' : zoomButtons.reset}" 
  class="center" (click)="zoomReset()">
  <i class="icon-refresh"></i>
</div>
<div [ngClass]="{'orangeText' : zoomButtons.out}" 
  class="zoom-out" (click)="zoomOut()">
  <i class="icon-search-minus"></i>
</div>
<div [ngClass]="{'orangeText' : zoomButtons.in}" 
  class="zoom-in" (click)="zoomIn()">
  <i class="icon-search-plus"></i>
</div>

Класс orangeText будет применяться, если он получит true после :, как в этом примере из углового doc :

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">

и в этом месте:

[ngClass]="{'orangeText' : zoomButtons.reset}"

zoomButtons.reset без одинарных кавычек будет рассматриваться как переменная, поэтому будет возвращено true или false.

person Vadi    schedule 10.02.2020
comment
спасибо, работает идеально! - person homerThinking; 10.02.2020