代码之家 › 专栏 › 技术社区 › physicsboy

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

animation angular css html

physicsboy · 技术社区 · 7 年前

我过去使用过[ngClass],根据之前javascript/typescript中保存的变量的布尔值应用类。但是,我想知道是否可以基于本地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>

这里,我显示两个图标中的一个,具体取决于本地用户 isExpanded

我想应用一个基于此值的类。。。可能吗?

Here is what I am working on

3 回复 | 直到 7 年前

Sachila Ranawaka 7 年前

像 [class.expanded]="isExpanded" . 约束 class.expanded

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

Muhammed Albarmavi 7 年前

你可以用 *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

Jaffar 7 年前

<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>