Question

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

@team = Team.find(params[:event][:team_id])
@event = @team.events.create(event_params)

假设我们只有2个项目。这里的问题是它适用于这两个项目。所以它隐藏并显示两个组件中的div部分。如果我们有这样的东西，它可能是完美的：

<li *ngFor=" #item of items " >
  <a href="#" (onclick)="hideme = !hideme">Click</a>
  <div [hidden]="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>

Answer 3

这是一个示例，在父项目折叠时显示加号，并在展开时切换为减号，并显示属于所点击类别的项目列表。（在您的情况下，这将是包含您想要显示和隐藏而不是列表的内容的div。）

我使用详细信息和摘要元素而不是手风琴来实现这一目标。这些元素是专为此用例而构建的。

使用此主题中提出的问题：angular2 toggle icons inside ngFor

以下是折叠和展开类别的截图：

Collapsed category with plus sign

Expanded category with minus sign

这是模板：

<ul *ngIf="categoryList && categoryList.length > 0">
        <li *ngFor="let category of categoryList">
            <details>
                <summary>
                    <i class="fa fa-lg expand-icon"></i>
                    <span>{{ category.name }}</span>
                </summary>
                <ul>
                    <li *ngFor="let item of category.yourItemListUnderCategory">{{ item }}</li>
                </ul>
            </details>
        </li>
    </ul>

我使用Font Awesome作为加号和减号图标，以及如何切换它们。在您的CSS中，添加以下样式：

（我用我指定的类引用了图标，但你也可以这样做详情摘要i：之前和详情[开放]摘要i：之前）

details summary .expand-icon:before {
    content: "\f055";
}
details[open] summary .expand-icon:before {
    content: "\f056";
}

注意：我使用Bootstrap主题作为屏幕截图，但删除了元素上的类名，以免弄乱答案。

Answer 4

在HTML中：（点击）=＆＃34;的onClick（$事件）＆＃34;

在deClick函数内部，您可以捕获事件并像jquery对象一样使用它，如下所示：

onClick(event){
   $(event.target).siblings('div').toggle(500);
}

在这个例子中，我搜索目标对象的兄弟，你可以用你需要的任何对象来做。

Answer 5

在组件类中，声明hideme变量（typescript）：

export class MyPage{
   hideme = {};
   constructor(){
       this.hideme = {}; // init is required
   }
   ...

在模板中显示/隐藏控件：

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

注意： hideme不需要初始化，因为hideme[item.id]为undefined因此!hideme[item.id]将true。

Answer 6

通过将值传递给函数来添加HTML ngFor。

<ul *ngFor="let ent of entities;let i = index">
  <li>
    <div (click)="showEntity(ent)">
      <h5 class="h5">
        {{ent.values}}
      </h5>
      <p [hidden]="!hideme["ent.id]">
        <span class="play-icon"></span>
        {{ent.name}}
      </p>
    </div>
  </li>
</ul>

声明变量。

 hideme = {};
 entities = [
    { id: 1, values: "Animal", name: "Tiger" },
    { id: 2, values: "Bird", name: "Sparrow" },
    { id: 3, values: "River", name: "Nile" }
  ];

在构造函数和onInit中初始化它。

  constructor() {
    this.hideme = {};
  }

  ngOnInit(): void {
    this.entities.forEach(e => {
      this.hideme[e.id] = false;
    });
  }

将所有值设置为false。

然后点击。

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

将该垂直id的标志更改为true，其余的将为false

检查stackblitz here！

在ngFor中隐藏/显示单个项目

6 个答案: