Angular - *ngFor中对象列表中的css样式更改

Question

我有两个组件，parent：

<ng-container *ngIf="itemList != null">
  <div *ngFor="let item of itemList">
    <component-item [componentItem]="item"></component-item>
  </div>
</ng-container>

和子组件(component-item)：

<div class="row myClass" [ngClass]="{'selected': isSelected }" (click)="method()">
    ...
</div>

因此，我有了项目列表。我有两个css样式:默认和“选定”。我想在点击后改变项目的样式，比如:当我点击第一个项目时，它应该变成"selected“，然后在点击第二个项目后，它应该变成"selected”，第一个项目返回到默认值。我的变量"isSelected“是一个布尔类型，我在"method()”中将它的值改为"true“。当我从列表中选择另一个项目时，如何将其值更改为"false“？

Answer 1

Try like this, it may work

在component.ts文件中cssEnabled:any=""；

private method(itemName:string)
{

 this.cssEnabled=itemName;

}
In compontent.html :

<div class="row myClass" [ngClass]="{'selected': componentItem==cssEnabled}" (click)="method(componentItem)">
    ...
</div>