Angular点击Div切换显示状态求助：无法恢复已隐藏Div（禁用*ngIf）

嗨，我来帮你搞定这个Angular的交互问题！你的需求是点击一个<div>时隐藏它，同时让其他已经隐藏的<div>恢复显示，现在的问题是之前隐藏的元素没法恢复，对吧？咱们一步步来解决它：

问题分析 #

你当前的代码只是在点击时把当前episode的showDiv设为false，但完全没处理其他episode的状态——所以之前隐藏的那些元素会一直保持隐藏，自然不会恢复啦。

解决方案 #

我们需要在点击事件里做两件事：一是把所有已隐藏的元素恢复显示，二是隐藏当前点击的元素。而且要严格遵循你的要求：用迭代实现，不在同一元素上混用*ngIf和*ngFor。

1. 修改模板代码

我们用[hidden]指令来控制元素的显示/隐藏（避免和*ngFor冲突），同时把点击事件绑定到组件里的方法上：

<hello name="{{ name }}"></hello>
<p> Start editing to see some magic happen :) </p>
<div 
  *ngFor="let episode of episodes; let i = index" 
  (click)="handleEpisodeClick(i)" 
  [hidden]="!episode.showDiv"
  style="width:100px;height:100px;border:2px solid black; margin: 8px; display: inline-block;"
> 
  tile{{i}} 
</div>

这里加了display: inline-block和margin是为了让div排列更美观，你可以根据需要调整。

2. 组件中添加处理方法

在AppComponent里添加一个handleEpisodeClick方法，用迭代来处理所有episodes的状态：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  name = 'Angular 6';
  episodes = [
    { title: 'Winter Is Coming', director: 'Tim Van Patten', showDiv: true },
    { title: 'The Kingsroad', director: 'Tim Van Patten', showDiv: true },
    { title: 'Lord Snow', director: 'Brian Kirk', showDiv: true },
    { title: 'Cripples, Bastards, and Broken Things', director: 'Brian Kirk', showDiv: true },
    { title: 'The Wolf and the Lion', director: 'Brian Kirk', showDiv: true },
    { title: 'A Golden Crown', director: 'Daniel Minahan', showDiv: true },
    { title: 'You Win or You Die', director: 'Daniel Minahan', showDiv: true },
    { title: 'The Pointy End', director: 'Daniel Minahan', showDiv: true }
  ];

  handleEpisodeClick(index: number) {
    // 迭代所有episode，恢复已隐藏的元素显示
    this.episodes.forEach(episode => {
      if (!episode.showDiv) {
        episode.showDiv = true;
      }
    });
    // 隐藏当前点击的元素
    this.episodes[index].showDiv = false;
  }
}

如果你想要更简洁的写法（效果完全一样），可以把迭代部分简化为：

this.episodes.forEach(episode => episode.showDiv = true);

这样不管元素之前是什么状态，都会先恢复显示，再隐藏当前点击的元素，完美匹配你的需求。

为什么这样可行？ #

• 用[hidden]代替*ngIf，避免了在同一元素上混用*ngIf和*ngFor的问题；
• 通过forEach迭代所有episodes，严格遵循了“必须通过迭代实现”的要求；
• 每次点击都会先重置其他元素的状态，再处理当前元素，确保只有当前点击的元素隐藏，其他都显示。

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