angular - 隐藏/显示 ngFor 中的单个项目

Question

我需要显示/隐藏部分组件。这是 Angular2 示例。

<li *ngFor=" #item of items " >
  <a href="#" (onclick)="hideme = !hideme">Click</a>
  <div [hidden]="hideme">Hide</div>
</li>

假设我们只有 2 个项目。这里的问题是它对这两个项目都有效。因此它在两个 组件中隐藏和显示div 部分。如果我们能有这样的东西就完美了:

<li *ngFor=" #item of items " >
   <a href="#" (onclick)="this.hideme = !this.hideme">Click</a>
   <div [hidden]="this.hideme">Hide</div>
</li>

那么有没有一些简单的方法可以解决这个问题呢？

Answer 1

你是hideme 变量是全局的。也许您可以将其附加到当前项目:

<li *ngFor=" #item of items " >
  <a href="#" (onclick)="item.hideme = !item.hideme">Click</a>
  <div [hidden]="item.hideme">Hide</div>
</li>

否则您需要使用组件中的专用对象。这是一个示例:

<li *ngFor="let item of items " >
  <a href="#" (onclick)="hideme[item.id] = !hideme[item.id]">Click</a>
  <div [hidden]="hideme[item.id]">Hide</div>
</li>

不要忘记在您的组件中以这种方式初始化 hideme 对象:

hideme:<any> = {};

编辑

如果你想让它像标签一样工作，你需要做更多的工作;-)

<li *ngFor="let item of items " >
  <a href="#" (onclick)="onClick(item)">Click</a>
  <div [hidden]="hideme[item.id]">Hide</div>
</li>

并显示被点击的元素并隐藏其他元素:

onClick(item) {
  Object.keys(this.hideme).forEach(h => {
    this.hideme[h] = false;
  });
  this.hideme[item.id] = true;
}