Angular 10实现*ngFor元素点击切换：仅保留当前元素样式其余折叠

我来帮你调整代码，实现你要的「点击元素后其余折叠，再次点击当前元素恢复全部」的效果～

核心逻辑梳理 #

我们需要跟踪当前激活的元素，并根据点击行为切换状态：

• 点击未激活的元素：该元素保持初始样式，其余元素应用折叠样式
• 点击已激活的元素：清空激活状态，所有元素恢复初始样式
• 点击其他元素：替换激活元素，更新折叠样式

完整代码实现 #

TypeScript 部分

首先修改组件的逻辑，添加状态跟踪和点击判断：

import { Component } from '@angular/core';

@Component({
  selector: 'app-disney-list',
  templateUrl: './disney-list.component.html',
  styleUrls: ['./disney-list.component.css']
})
export class DisneyListComponent {
  disney: string[] = ['pippo', 'pluto', 'topolino'];
  // 用null表示无激活元素的状态
  activeItem: string | null = null;

  toggleItem(name: string): void {
    // 如果点击的是当前激活的元素，清空激活状态
    if (this.activeItem === name) {
      this.activeItem = null;
    } else {
      // 否则设置当前元素为激活状态
      this.activeItem = name;
    }
  }
}

HTML 部分

修改模板的类绑定逻辑，给非激活元素添加折叠样式：

<div 
  *ngFor="let name of disney" 
  class="basic" 
  (click)="toggleItem(name)"
  <!-- 当有激活元素且当前元素不是激活元素时，应用折叠类 -->
  [class.collapsed]="activeItem && name !== activeItem"
>
  {{name}}
</div>

CSS 部分

定义初始样式和折叠样式，加个过渡让变化更平滑：

.basic {
  height: 50px;
  background-color: beige;
  transition: all 0.3s ease;
  width: 100%;
}

/* 折叠状态的样式：颜色变浅，宽度缩小 */
.collapsed {
  background-color: #f5f5dc80; /* 半透明的beige */
  width: 80%;
}

逻辑说明 #

1. 状态跟踪：activeItem变量记录当前激活的元素，null表示没有元素激活（全部展开状态）
2. 点击处理：toggleItem函数判断点击的元素是否是当前激活的，是的话就清空状态，否则设置为新的激活元素
3. 样式绑定：通过[class.collapsed]条件判断，只有当存在激活元素且当前元素不是激活元素时，才应用折叠样式

这样就能完美实现你要的交互效果啦～

内容的提问来源于stack exchange，提问作者TeoSandroSte