Angular 2：如何仅在 *ngFor 的选择性迭代中隐藏按钮？答案

【问题标题】：Angular 2: How to hide button only on selective iteration of *ngFor?Angular 2：如何仅在 *ngFor 的选择性迭代中隐藏按钮？
【发布时间】：2016-08-17 06:45:34
【问题描述】：

我有以下 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的仅选择性迭代的按钮？

【问题讨论】：

标签： javascript angular typescript

【解决方案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;      
    }
}

【讨论】：

不，这在我的代码中不起作用。事实上，它完全停止显示其他迭代。
我已经编辑了示例 ngFor 演示以满足您的需求。就像我上面的代码一样，但我必须将 isHidden 从任何更改为任何 []。 plnkr.co/edit/E00kPmnzKb7Lql4iWa26?p=preview

【解决方案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;    
    }
}

【讨论】：

你能告诉我product、hidebutton、flag和product.hiddenbutton是如何相关的吗？我无法确定流程。
您为每个产品对象动态创建一个名为 .hiddenbutton 的产品对象属性。 Flag 只是一个接收值的参数变量，你可以使用任何其他名称代替。
感谢您更新您的答案。实际上这在我的代码中仍然不起作用 - 它没有动态获取属性。

【解决方案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 或 typescript，所以我不知道语法。也许它是这样工作的。

【讨论】：

hidebutton===button{{product.Id}} ：这似乎是 Ionic 2 的语法，在我的 HTML 中不起作用。你有替代语法吗？