如何使HTML按钮仅用于第一次角度单击？
如何使HTML按钮仅用于第一次角度单击？
提问于 2018-08-13 05:10:59
我试图实现这样的功能：一旦单击按钮，它将其隐藏在列表中，并从左边的层次结构(TreeNode)取消相应的复选框。
组件.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>组件.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;
}
}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>在右边的.Component.html中，我有按钮，它基本上列出了右边的项目。与我发现的类似的东西：http://next.plnkr.co/edit/1Fr83XHkY0bWd9IzOwuT?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview
当我第一次点击按钮时，它会工作(隐藏和取消选择)。但是，对于随后的所有单击，我必须多次单击(在屏幕上的某个地方或按钮本身)才能隐藏它。如果我从底部按钮开始，然后转到列表的顶部，它只需单击一次即可工作。
我在控制台中看不到任何错误，我想知道是否可以做些什么来避免这种错误行为。我想要隐藏发生与所有的按钮单点击。
回答 1
Stack Overflow用户
发布于 2018-08-13 15:02:35
问题在于：
<input type="checkbox" class="checkboxes" value="{{user.id}}"
ng-click="ctrl.selectUser(user)"
ng-checked="user.selected"
/>
ctrl.selectUser = function (user) {
user.selected = true;
getSelected();
};如果取消选中复选框：
ng-checked="user.selected定定user.selected = falseng-click="ctrl.selectUser(user)"定定user.selected = true
第一次单击总是可以的，因为这两个绑定都将被设置user.selected = true
快速解决方案：
ctrl.selectUser = function (user) {
user.selected = !user.selected;
getSelected();
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100002102
复制相关文章
相似问题