javascript - Angular 2 : How to hide button only on selective iteration of *ngFor?

Question

我有以下 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 的按钮吗？

Answer 1

让 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;      
    }
}