Html隐藏按钮正在隐藏所有按钮，而不是一个按钮
Html隐藏按钮正在隐藏所有按钮，而不是一个按钮
提问于 2018-08-10 03:08:25
我试图在被点击时隐藏一个按钮。
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>[];
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;
}
}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>当我单击任何按钮时，所有的项目都会消失。我只想让被点击的项目消失。当我再次选中该复选框时，该项目应该会重新出现。我想实现一些与我发现的类似的东西，但对于我的数据结构：
我该如何解决这个问题呢？如果需要任何其他代码，请让我知道。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-10 03:13:31
在每个项目中使用selected属性，而不是使用通用的hide变量，因为在取消选择时将其设置为false。
<button class="btn" (click)="deselect(item)" *ngIf="item.selected">
<i class="fa fa-close"> {{ item.displayName }} </i>
</button> Stack Overflow用户
发布于 2018-08-10 03:13:12
尝尝这个
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51774210
复制相关文章
相似问题