Javascript HTML按钮隐藏在单击时无法正常工作

我试图实现的功能是，单击按钮后，它会将其从列表中隐藏，并从左侧的层次结构（TreeNode）中取消选中相应的复选框

Rightside.component.html：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <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>

rightside.component.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>[];

  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 {
    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）：无效{
if（（item.children）！==null）{
item.children.forEach（元素=>{
取消选择（元素）；
});
}
item.selected=false；
}
}

productline.component.html：

<p>Productlines</p>
<mat-input-container>
    <input #searchInput matInput placeholder="Search for Product Line">
</mat-input-container>
<div class="flex-container">
<div class="PLCheck" *ngIf="isDataLoaded">
    <fortune-select
       (dataChanged)="onDataChange($event)"
       [searchTerm]="searchInput.value"
       [currentNode]="tree"
       [singleSelect]="singleSelect"
       [collapsed]="true"></fortune-select>
</div>
<div class="sendToRight">
    <rightside-component
        [treeNode]="selectedProductLine">
    </rightside-component>
</div>
</div>

产品线

Treenode.ts：

import { ValidationService } from '../service/validation.service';

export class TreeNode<T> {
  displayName:   string;
  children:      TreeNode<T>[];
  selected:      boolean;
  collapsed?:    boolean;
  indeterminate: boolean;
  selectable:    boolean;
  value:         T;

  public static getAllNodeValues<T>(tree: TreeNode<T>):T[] {
    return TreeNode.getAllCheckedNodes<T>(tree).map((nodes:TreeNode<T>) => nodes.value);
  }

  public static getTopLevelNodeValues<T>(tree: TreeNode<T>):T[] {
    return TreeNode.getTopLevelCheckedNodes<T>(tree).map((nodes:TreeNode<T>) => nodes.value);
  }

  public static getTopLevelCheckedNodes<T>(tree: TreeNode<T>):TreeNode<T>[] {
    if(tree.selected) {
      return [tree];
    } else if(tree.indeterminate) {
      return tree.children.reduce(
        (acc,child) => acc.concat(TreeNode.getTopLevelCheckedNodes(child)),[]);
    } else {
      return <TreeNode<T>[]>[];
    }
  }

  public static getAllCheckedNodes<T>(tree: TreeNode<T>):TreeNode<T>[] {
    if(tree.selected && tree.children) {
      return tree.children.reduce(
        (acc,child) => acc.concat(TreeNode.getAllCheckedNodes(child)),[tree]);
    } else if (tree.selected) {
      return [tree];
    } else if(tree.children) {
      return tree.children.reduce(
        (acc,child) => acc.concat(TreeNode.getAllCheckedNodes(child)),[]);
    } else {
      return <TreeNode<T>[]>[];
    }
  }

  public getValue(): T {
    return this.value;
  }

  public matches(searchTerm:string):boolean {
    if(this.displayName.toLowerCase().includes(searchTerm.toLowerCase())) {
      return true;
    }
    if (!ValidationService.isEmptyList(this.children)) {
      return this.children.some((child) => child.matches(searchTerm));
    }
    return false;
  }

  public selectChildren(selected:boolean):void {
    if (!ValidationService.isEmptyList(this.children)) {
      this.children.map((child) => {
        child.selected = selected;
        child.indeterminate = false;
        child.selectChildren(selected);
      });
    }
  }
}

从“../service/validation.service”导入{ValidationService}；
出口级树节点{
显示名称：字符串；
儿童：TreeNode[]；
所选：布尔型；
折叠？：布尔值；
不确定：布尔值；
可选：布尔型；
值：T；
公共静态getAllNodeValues（树：TreeNode）：T[]{
返回TreeNode.getAllCheckedNodes（tree.map）（（nodes:TreeNode）=>nodes.value）；
}
公共静态getTopLevel节点值（树：TreeNode）：T[]{
返回TreeNode.getToLevel检查节点（tree.map）（（节点：TreeNode）=>nodes.value）；
}
公共静态getTopLevelCheckedNodes（树：TreeNode）：TreeNode[]{
如果（选定的树）{
返回[树]；
}else if（树不确定）{
返回tree.children.reduce(
（acc，child）=>acc.concat（TreeNode.GetToLevel检查节点（child）），[]）；
}否则{
返回[]；
}
}
公共静态getAllCheckedNodes（树：TreeNode）：TreeNode[]{
if（tree.selected&&tree.children）{
返回tree.children.reduce(
（acc，child）=>acc.concat（TreeNode.getAllCheckedNodes（child）），[tree]）；
}else if（tree.selected）{
返回[树]；
}else if（tree.children）{
返回tree.children.reduce(
（acc，child）=>acc.concat（TreeNode.getAllCheckedNodes（child）），[]）；
}否则{
返回[]；
}
}
public getValue（）：T{
返回此.value；
}
公共匹配（searchTerm:string）：布尔值{
if（this.displayName.toLowerCase（）.includes（searchTerm.toLowerCase（）））{
返回true；
}
如果（！ValidationService.isEmptyList（this.children））{
返回this.children.some（（child）=>child.matches（searchTerm））；
}
返回false；
}
public selectChildren（所选：布尔值）：无效{
如果（！ValidationService.isEmptyList（this.children））{
this.children.map（（child）=>{
child.selected=selected；
child.undeterminate=false；
child.选择children（已选）；
});
}
}
}

在rightside.component.html中，我有一些按钮，它们基本上列出了右侧的项目。类似于我发现的这个plunkr的东西：

我必须多次单击（在屏幕上其他地方或按钮本身）才能将其隐藏。如果我从底部按钮开始，然后转到列表的顶部，它只需单击一下即可工作。由于某些原因，这些按钮在单击一次后就无法工作

我在控制台中看不到任何错误，我想知道是否可以采取任何措施来避免这种错误行为。我想隐藏发生与所有按钮的单键点击，当按任何顺序点击

---

感谢您的帮助。

而不是

item.selected=false您应该重新分配项，因此请尝试
项={…项，selected:false}我已经更新了问题并添加了TreeNode.ts代码。执行此操作时，我可以看到此错误：类型“{selected:false；displayName:string；children:TreeNode[]；collapsed？：boolean；indete…”不可分配给类型“TreeNode”。类型“{selected:false；displayName:string；children:TreeNode[]；collapsed？：boolean；indete…”中缺少属性“getValue”。