Question

我过去使用过[ngClass]，根据之前在javascript / typescript中保存的变量的布尔值应用类。但是我想知道是否可以根据本地HTML布尔值应用它？

即。

var

在这里，我将显示两个图标之一，具体取决于HTML（而不是后端）中定义的本地<div class="card" *ngFor="let item of data" #panel ngClass="{expanded: isExpanded}"> <div class="header"> <div class="itemName">Text</div> <div class="itemDir">Some more text</div> <mat-icon *ngIf="!panel.isExpanded" (click)="panel.isExpanded=true">edit</mat-icon> <mat-icon *ngIf="panel.isExpanded" (click)="panel.isExpanded=false">cancel</mat-icon> </div> </div>变量。

我想根据此值应用一个类...可以吗？

Here is what I am working on

Answer 1

使用方式类似于[class.expanded]="isExpanded"。绑定到class.expanded胜过class属性

<div class="card" *ngFor="let item of data" #panel [class.expanded]="panel.isExpanded" [class.notExpanded]="!panel.isExpanded">

Answer 2

您可以使用*ngIf="true as isExpanded"在模板上进行变量

<div class="card" *ngFor="let item of [1,2,3,4];"  >
  <div class="header" *ngIf="true as isExpanded" ngClass="{expanded: !isExpanded}">
    <div class="itemName">Text</div>
    <div class="itemDir">Some more text</div>
    <div *ngIf="isExpanded" (click)="isExpanded=!isExpanded">edit</div>
    <div *ngIf="!isExpanded" (click)="isExpanded=!isExpanded">cancel</div>
  </div>
</div>

stackblitz demo

Answer 3

<div class="card" *ngFor="let item of data" #panel ngClass="{expanded: isExpanded}">
<div class="header">
    <div class="itemName">{{item.name}}</div>
    <div class="itemDir">{{item.directory}}</div>
    <mat-icon *ngIf="!isExpanded;else other_content" (click)="isExpanded=true">edit</mat-icon>
    <ng-template #other_content>Other Icon goes here</ng-template>
</div>

您可以通过模板引用的变量引用上述使用If和else的代码，该变量可以在图标和非图标之间正确切换

根据本地html条件使用[ngClass]添加类

3 个答案: