Angular中隐藏用户点击的指定索引div实现问题（TypeScript新手求助）

嘿，作为Angular+TypeScript新手，要搞定点击div隐藏它的功能其实很简单～你的现有代码已经搭好基础了，只需要针对循环列表的特性调整一下状态管理方式就行：

问题分析 #

你当前用单个showDiv布尔值来控制显示，但因为是*ngFor循环出来的多个div，单个变量没法精准控制每一个元素的显示/隐藏，所以我们需要用数组来记录每个item的状态。

步骤1：修改组件类代码 #

首先更新你的TypeScript逻辑，把单个布尔值改成状态数组，同时初始化数组并完善点击方法：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit { 
  name = 'Angular 6';
  // 这里替换成你的实际剧集数据
  episodes = [{title: "第一集"}, {title: "第二集"}, {title: "第三集"}];
  // 用数组存储每个div的显示状态，默认都显示
  showDivArray: boolean[] = [];

  ngOnInit() {
    // 根据剧集数量初始化状态数组，每个元素默认true（显示）
    this.showDivArray = this.episodes.map(() => true);
  }

  showDetails(index: number) {
    // 点击时切换对应索引的div状态（如果只想点击后隐藏，改成this.showDivArray[index] = false即可）
    this.showDivArray[index] = !this.showDivArray[index];
  }
}

步骤2：更新模板代码 #

在HTML模板里，用*ngIf绑定对应索引的状态值，控制div的显示：

<div 
  class="tiles" 
  *ngFor="let episode of episodes; let i = index" 
  (click)="showDetails(i)" 
  *ngIf="showDivArray[i]"
  style="width:100px;height:100px;border:2px solid black; margin:8px; cursor:pointer"
> 
  {{episode.title}} 
</div>

额外说明 #

• 如果你的需求是点击一次就永久隐藏，而不是切换显示/隐藏，只需要把showDetails方法里的代码改成this.showDivArray[index] = false;就行
• 我给模板加了点margin和cursor样式，让交互体验更好，你可以根据自己的需求调整

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