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>

在您的控制器中

@Component({
   ---
   ---
})
export class followproduct implements onInit{
hidebutton: any[] = [];
Follow(productId: number) {
        ---
        this.hidebutton[productId] = true;      
    }
}

Answer 2

这是因为所有产品共享名为 hidebutton 的变量。您需要做的是，为每个产品创建一个新变量，如下所示，

<tr *ngFor='let product of products'>
     <td>
            <button [hidden]="product.hidebutton"                           
           (click)="Follow(product.Id,product.hiddenbutton)">Follow</button>                           
     </td>
</tr>

export class followproduct implements onInit{
//hidebutton: boolean = false;
Follow(productId: number,hidebutton:boolean) {
        ---

        //if(hidebutton==false)

        hidebutton= true;

        //hidebutton =!hidebutton;    
    }
}

Answer 3

给你的按钮一个id（无论如何你应该做什么）并使用它。

<tr *ngFor='let product of products'>
     <td>
            <button [hidden]="hidebutton==='button'+product.Id" (click)="Follow(product.Id)">Follow</button>                           
     </td>
</tr>

在控制器中

@Component({
   ---
   ---
})
export class followproduct implements onInit{
hidebutton: string= '';
Follow(productId: number) {
        ---
        this.hidebutton = 'button'+product.Id;      
    }
}

这样的事情应该有效

<强>更新

抱歉，之前从未使用过Angular2或打字稿，所以我不知道语法。也许它就像这样。

Angular 2：如何仅在选择性迭代* ngFor时隐藏按钮？

3 个答案: