Javascript Html隐藏按钮隐藏所有按钮，而不是一个按钮

我试图在单击时隐藏按钮

组件1.ts：

import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { DataService } from '../../shared/service/data.service';
import { TreeNode } from '../../shared/dto/TreeNode';

import html from './rightside.component.html';
import css from './rightside.component.css';

@Component({
  selector: 'rightside-component',
  template: html,
  providers: [DataService],
  styles: [css],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class RightSideComponent implements OnInit {
  selections: string[];
  @Input() treeNode: TreeNode<string>[];
  hide: boolean = false;

  constructor(private cd: ChangeDetectorRef) {}

  ngOnInit() {
  }

  getSelections() : TreeNode<string>[] {
    if (typeof(this.treeNode) == "undefined" || (this.treeNode) === null) {
      return [];
    }
    return this.treeNode;
  }

  deselect(item: TreeNode<string>): void {
    this.hide = true;
    if((item.children) !== null) {
      item.children.forEach(element => {
        this.deselect(element);
      });
    }
    item.selected = false;
  }

}

import{Component，Input，OnInit，ChangeDetectionStrategy，ChangeDetectorRef}来自“@angular/core”；
从“../../shared/service/data.service”导入{DataService}；
从“../../shared/dto/TreeNode”导入{TreeNode}；
从“./rightside.component.html”导入html；
从“/rightside.component.css”导入css；
@组成部分({
选择器：'右侧组件'，
模板：html，
提供者：[数据服务]，
样式：[css]，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类RightSideComponent实现OnInit{
选择：字符串[]；
@Input（）树节点：树节点[]；
隐藏：布尔=假；
构造函数（私有cd:ChangeDetectorRef）{}
恩戈尼尼特（）{
}
getSelections（）：树节点[]{
if（typeof（this.treeNode）=“undefined”| |（this.treeNode）==null）{
返回[]；
}
返回这个.treeNode；
}
取消选择（项目：TreeNode）：无效{
this.hide=true；
if（（item.children）！==null）{
item.children.forEach（元素=>{
取消选择（元素）；
});
}
item.selected=false；
}
}

component.html：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
  <ul class="selection-list">
    <li *ngFor="let item of getSelections()">
      <button class="btn" (click)="deselect(item)" *ngIf="!hide">
        <i class="fa fa-close"> {{ item.displayName }} </i>
      </button> 
    </li>
  </ul>
</div>

当我点击任何按钮时，所有的项目都消失了。我只希望单击的项目消失。当我再次选中复选框时，该项目应重新显示。我想实现类似于我发现的这个plunkr的东西，但对于我的数据结构：

我怎样才能解决这个问题？如果需要其他代码，请告诉我。

试试这个

  hide= [];

    <div>
      <ul class="selection-list">
        <li *ngFor="let item of getSelections();let i=index">
          <button class="btn" (click)="deselect(item: 
           TreeNode<string>);hide[i]=!hide[i]" *ngIf="hide[i]">
            <i class="fa fa-close"> {{ item.displayName }} </i>
          </button> 
        </li>
      </ul>
    </div>

hide=[]；


{{item.displayName}}

在每个项目中使用

selected

属性，而不是使用公共

hide

变量，因为取消选择时将其设置为false

<button class="btn" (click)="deselect(item)" *ngIf="item.selected">
   <i class="fa fa-close"> {{ item.displayName }} </i>
</button> 

{{item.displayName}}

您的所有项目都会消失，因为它们都具有相同的“隐藏”属性，因此当您单击其中一个项目时，所有项目的隐藏属性都会改变。您应该拥有每个项目的一个属性（该属性应初始化为true）

component.html

<div>
  <ul class="selection-list">
    <li *ngFor="let item of getSelections()">
      <button class="btn" (click)="deselect(item)" *ngIf="item.selected">
        <i class="fa fa-close"> {{ item.displayName }} </i>
      </button> 
    </li>
  </ul>
</div>

---

组件技术

    deselect(item: TreeNode<string>): void {
        item.selected = false;
        if((item.children) !== null) {          
            item.children.forEach(element => {
            this.deselect(element);
          });
        }
    }

取消选择（项目：TreeNode）：无效{
item.selected=false；
如果（（item.children）！==null）{
item.children.forEach（元素=>{
取消选择（元素）；
});
}
}

这不会使任何项目在选中时显示。@删除！做记号谢谢你指出这一点。：）成功了。当我第一次点击一个按钮时，它会隐藏它。然而，当我点击任何其他按钮之后，我必须点击它多次（或在屏幕上，然后再次点击该按钮），它会被隐藏。有没有办法解决这个问题？它实际上包含许多组件，并且具有依赖性，因此plunkr似乎很难实现。我问了一个问题并在这里发布了代码：那么我在哪里调用取消选择函数呢？我已经更新了我的问题并添加了关于TreeNode数据结构的代码。