在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;
}

Answer 2

对我有用:

在你的compoment decler中关于hideme作为数组

hideme=[]

并在ngFor做:

<li *ngFor="item of items;let i = index " >
   <a (click)="hideme[i] = !hideme[i]">show/hide</a>
   <div [hidden]="hideme[i]">The content will show/hide</div>
</li>