Angular

Question

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

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

Answer 1

如果xzy是用SOMELOGIC触发的，为什么不用同样的[=触发xy class 10=]?试试看，我认为这是合乎逻辑的。祝你好运:)

Answer 2

In Primeng-datatable checkboxed selection, I want to show a customized tick mark. So when checkbox is toggled, I want to activate and deactivate a specific class when checkboxes are toggled.

为了实现你可以这样做在 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 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 class。它在 someVar 为真时触发。在 p-column 应用 xyz 时，它也会在 someVar 为真时触发。所以关键是，如果你想在触发 xy 时触发 xyz，只需触发 xyz触发 xy 的变量。希望对您有所帮助:)

Angular - 当另一个 class 被 JS 激活时激活一个 class

Angular - Activating a class when another class is activated by JS

html

typescript

ng-class

angular-ng-if