angular - 角动画。事件后更新动画状态

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
}

我希望能够为（并且仅针对）用户在收到对话框响应后单击的特定 div 动态更新 [@fade_out] 状态。

如果我将 [@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
}