有角度的動畫。事件發生後更新動畫狀態

Question

說我有我的組件的HTML

<div *ngFor='let box of boxes' [@fade_out]='off'> 
<h1> Author: {{ box.author }} </h1> 
<button (click)='delete(box)'>Delete box</button> 
</div> 

，並在控制器中執行以下：

delete(box: any){ 
//opens an mddialog that confirms deletion 
dialog.open(...).afterClosed().subscribe(response => { 
//do something 
} 

我希望能夠動態更新[@fade_out]狀態用於（並且僅用於）用戶在從對話框接收到響應之後單擊的特定div。

如果我將[@fade_out]綁定到控制器中的布爾值，所有其他框將觸發相同的動畫，因此全部淡出。

如果我將[@fade_out]綁定到某個函數，那麼在得到響應後，如何觸發該特定div的特定函數會丟失。

任何人都可以建議一種方法讓我做這項工作？

Answer 1

所以答案就在那裏，我沒有看到它。根據文檔，我只是將動畫鏈接到對象的屬性。

<div *ngFor='let box of boxes' [@fade_out]='box.state'> 
<h1> Author: {{ box.author }} </h1> 
<button (click)='delete(box)'>Delete box</button> 
</div> 

我然後將數據傳遞給對話框，然後在訂閱afterClosed（）我可以更新專用庫狀態

dialog.open(...).afterClosed().subscribe(response => { 
box.state = response 
}