Angular 2：如何隱藏按鈕* ngFor的選擇性迭代？

Question

我有以下的HTML代碼：

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

和相應的點擊事件在我的打字稿followproduct.component.ts：

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

一旦點擊一個產品的跟蹤按鈕，其他產品的所有按鈕在迭代中被隱藏 - 這也是顯而易見的，因爲我正在爲迭代按鈕標籤分配隱藏選項。

有沒有什麼辦法隱藏，更新或更改只有選擇性迭代* ngFor的按鈕？

Answer 1

使隱藏按鈕成爲一個數組。事情是這樣的

<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

給你的按鈕一個ID（你應該做什麼）並使用它。

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

和Controller

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

類似的東西應該工作

更新

對不起，我從來沒有使用過Angular2或打字稿之前，所以我不知道的語法。也許它是這樣的。

Answer 3

這是因爲所有的產品份額相同的變量命名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;  
    } 
}