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

admin管理员组

文章数量:1431413

I have following HTML code:

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

And corresponding click event in my Typescript followproductponent.ts:

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

Upon clicking on Follow button of one product, all the buttons of other product in iteration gets hidden-and that's obvious too, as I am allotting the hidden option to iterative button tag.

Is there any way to hide, update or change the button of only selective iteration of *ngFor?

I have following HTML code:

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

And corresponding click event in my Typescript followproduct.ponent.ts:

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

Upon clicking on Follow button of one product, all the buttons of other product in iteration gets hidden-and that's obvious too, as I am allotting the hidden option to iterative button tag.

Is there any way to hide, update or change the button of only selective iteration of *ngFor?

• javascript
• angular
• typescript

Share Improve this question Follow asked Aug 17, 2016 at 6:45 Karan DesaiKaran Desai 3,17266 gold badges3838 silver badges6969 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Make hidebutton an array. Something like this

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

And in your controller

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

That's because all product share same variable named hidebutton. What you have to do is, create a new variable for each product as shown below,

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

give your buttons an id (what you should do anyway) and use that.

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

And in the controller

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

Something like that should work

Update

Sorry I never used Angular2 or typescript before, so I'm not aware of the syntax. Maybe it works like this.

本文标签： javascriptAngular 2 How to hide button only on selective iteration of *ngForStack Overflow