Angular - 当JS激活另一个类时激活一个类

Question

我想在使用ngClass激活类xy时激活类xyz。 我想实现这个场景：

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

Answer 1

在Primeng-datatable复选框选择中，我想显示自定义刻度线。因此，当切换复选框时，我想在切换复选框时激活和停用特定类。

为了实现这一点，你可以在html中执行此操作

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

在ts

    onChange(checked:boolean){
     let el=document.getElementById('checkBoxId');
if(checked){
      if(el)
      {
       el.classList.Add('xyz');
      }
     }
else{
   if(el)
      {
       el.classList.Remove('xyz');
      }
}
    }

Answer 2

如果用SOMELOGIC触发xzy，为什么不用相同的SOMELOGIC触发xy类？尝试一下，我认为这是合乎逻辑的。祝好运 ：）

Answer 3

这是一个例子：

<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为true时触发。在p-column上应用了xyz，当someVar为真时它也会触发。所以重点是，如果你想在xy被触发时触发xyz，只需触发带有触发xy的变量的xyz。希望能帮助到你 ：）