我有以下 HTML 代码:
<table>
<tr *ngFor='let product of products'>
<td>
<button [hidden]="hidebutton" (click)="Follow(product.Id)">Follow</button>
</td>
</tr>
</table>
以及我的 Typescript 中相应的点击事件 followproduct.component.ts:
@Component({
---
---
})
export class followproduct implements onInit{
hidebutton: boolean = false;
Follow(productId: number) {
---
this.hidebutton = true;
}
}
单击一个产品的“关注”按钮后,迭代中其他产品的所有按钮都会被隐藏——这也很明显,因为我将隐藏选项分配给迭代按钮标签。
有什么方法可以隐藏、更新或更改仅选择性迭代*ngFor 的按钮吗?
最佳答案
让 hidebutton 成为一个数组。像这样
<table>
<tr *ngFor='let product of products'>
<td>
<button [hidden]="hidebutton[product.Id]" (click)="Follow(product.Id)">Follow</button>
</td>
</tr>
</table>
在你的 Controller 中
@Component({
---
---
})
export class followproduct implements onInit{
hidebutton: any[] = [];
Follow(productId: number) {
---
this.hidebutton[productId] = true;
}
}
关于javascript - Angular 2 : How to hide button only on selective iteration of *ngFor?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38989820/