Добавить класс с [ngClass] в зависимости от локального условия HTML

Question

Я использовал [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, определенная в HTML, а не бэкэнд.

Я хочу применить класс на основе этого значения ... возможно ли это?

Вотнад чем я работаю

Answer 1

<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 и еще, по переменной с шаблоном, которая правильно переключается между иконкой и не иконкой

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

Answer 3

используйте как [class.expanded]="isExpanded".привязка к class.expanded превосходит атрибут класса

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