Angular - активация класса, когда JS активирует другой класс - PullRequest
Новая
       10

Angular - активация класса, когда JS активирует другой класс

0 голосов
/ 05 сентября 2018

Я хочу активировать класс xyz, когда класс xy активируется с помощью ngClass.
Я хочу реализовать этот сценарий: 

if class xyz is in the tag
activate class xy
ngClass="'xyz' then xy"

Ответы [ 3 ]

0 голосов
/ 05 сентября 2018

В выделенном флажке Primeng-datatable я хочу показать настроенный отметка Поэтому, когда флажок установлен, я хочу активировать и деактивировать определенный класс при переключении флажков.

Чтобы добиться этого, вы можете сделать это в html 

<p-checkbox (onChange)="onChange($event)" inputId="checkBoxId" name="groupname" value="val1" [(ngModel)]="selectedValues"></p-checkbox>

в тс 

    onChange(checked:boolean){
     let el=document.getElementById('checkBoxId');
if(checked){
      if(el)
      {
       el.classList.Add('xyz');
      }
     }
else{
   if(el)
      {
       el.classList.Remove('xyz');
      }
}
    }
0 голосов
/ 05 сентября 2018

Вот пример: 

<p-dataTable [value]="cars" [(selection)]="selectedCars3" dataKey="vin" [paginator]="true" [rows]="5" [headerCheckboxToggleAllPages]="true">
    <p-header [ngClass]="{'xy': someVar}">Checkbox Multiple Selection with Paging</p-header>
    <p-column [ngClass]="{'xyz': someVar}" [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
    <p-footer>
        <ul>
            <li *ngFor="let car of selectedCars3" style="text-align: left">{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}</li>
        </ul>
    </p-footer>
</p-dataTable>

На p-header применяется xy класс. Это срабатывает, когда someVar истинно. На p-column применяется xyz, оно также срабатывает, когда someVar равно true. Так что суть в том, что если вы хотите запустить xyz при срабатывании xy , просто запустите xyz с переменной, которая запускает xy . Надеюсь, это поможет:)

0 голосов
/ 05 сентября 2018

Если xzy запущен с SOMELOGIC, почему бы не вызвать xy класс с тем же SOMELOGIC? Попробуйте, я думаю, это логично. Удачи:)

...