我是棱角分明的新手。我正在迭代一个对象数组。我已经宣布了两个按钮,即Start&End。我想最初为每个项目显示开始。当用户点击项目的开始按钮应该隐藏的项目的开始按钮时,应显示结束按钮。
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-l-r-0-5" (click)="startTask(item.id)">Start</button>
<button class="btn btn-danger mar-l-r-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>
另一种方式Button由索引.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';
}