[英]Hide/show individual or specific button inside ngFor
我是新手。 我正在遍历一系列对象。 我声明了两个按钮,分别是开始和结束。 我想最初显示每个项目的开始。 当用户单击某个项目的“开始”按钮时,该项目的“开始”按钮应隐藏,而“结束”按钮应显示。
startTask(id) { console.log('item id',id) } EndTask(index) { console.log('item id',id) }
<div class="row no-gutters"> <div class="card width hr" *ngFor="let item of allUserTaskArr"> <div class="card-header"> {{item.due | date}} </div> <div class="card-body pad-125"> <div class="row no-gutters"> <div class="col-md-12"> {{item.name}} <div class="float-right"> <button class="btn btn-info mar-lr-0-5" (click)="startTask(item.id)">Start</button> <button class="btn btn-danger mar-lr-0-5" (click)="EndTask(item.id)">End</button> </div> </div> </div> </div> </div> </div>
在上面的示例中,每个项目都有一个唯一的ID。 每个项目都有一个开始和结束按钮。 我想为所有&最初显示开始按钮,当我单击某个项目的“开始”按钮时,只有该按钮应替换为“结束”按钮。 其他所有都应该保持不变。
[![ngFor items image]]: https ://i.stack.imgur.com/9pvLE.png
首先,您需要额外的属性,例如该数组的按钮
.ts文件
allUserTaskArr = [
{
'name': 'abc',
'id':1,
'button': 'start',
},
{
'name': 'xyz',
'id':1,
'button': 'end',
}
];
public startTask (item) {
item.button = 'end';
}
public endTask (item) {
item.button = 'start';
}
和.html文件是
<div class="card width hr" *ngFor="let item of allUserTaskArr">
<div class="card-header">
{{item.due | date}}
</div>
<div class="card-body pad-125">
<div class="row no-gutters">
<div class="col-md-12">
{{item.name}}
<div class="float-right">
<button class="btn btn-info mar-l-r-0-5" *ngIf="item.button =='start'" (click)="startTask(item)">Start</button>
<button (click)="endTask(item)" class="btn btn-danger mar-l-r-0-5" *ngIf="item.button =='end'">End</button>
</div>
</div>
</div>
</div>
</div>
按索引.html文件更改按钮的另一种方法
<div class="card width hr" *ngFor="let item of allUserTaskArr; let i = index">
<div class="card-header">
{{item.due | date}}
</div>
<div class="card-body pad-125">
<div class="row no-gutters">
<div class="col-md-12">
{{item.name}}
<div class="float-right">
<button class="btn btn-info mar-l-r-0-5" *ngIf="item.button =='start'" (click)="startTask(item, i)">Start</button>
<button (click)="endTask(item, i)" class="btn btn-danger mar-l-r-0-5" *ngIf="item.button =='end'">End</button>
</div>
</div>
</div>
</div>
</div>
.ts文件
allUserTaskArr = [
{
'name': 'abc',
'id':1,
'button': 'start',
},
{
'name': 'xyz',
'id':1,
'button': 'end',
}
];
public startTask (item, index) {
this.allUserTaskArr[index].button = 'end';
}
public endTask (item, index) {
this.allUserTaskArr[index].button = 'start';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.