我正在尝试在Angular 4中构建一个仪表板 . 在该仪表板中，我使用* ngFor迭代json（通过服务来）并在卡片中显示了一系列报告 . 在每张卡片中， Headers 上都有一些图标，点击后会执行一些操作，例如工具提示内的刷新，下载，弹出信息，pin-unpin等 .
为此，我想到使用变量来绑定那些元素，如（click）= "function()"，还有[@animationTag] = "variable"，如下所示：
...
<div class="card" *ngFor="let r of reportCards; let x of index">
<div class="card-header">
{{r.reportName}}
<div class="close" aria-label="Close">
<i class="fa fa-thumb-tack" aria-hidden="true" [@pinUnpin]="isPinned" (click)="unpinCard($event)"></i>
</div>
</div>
<div *ngIf="!ifMinimized" class="card-body">
{{r.reportMainDesc}}
</div>
<div *ngIf="!ifMinimized" class="card-footer">
{{r.reportFooterDesc}}
</div>
</div>
...
相应的动画代码：
animations: [
trigger('pinUnpin', [
state('pin', style({
transform: 'rotate(0deg)',
})),
state('unpin', style({
transform: 'rotate(90deg)',
})),
transition('pin => unpin', animate('300ms ease-in-out')),
transition('unpin => pin', animate('300ms ease-in-out'))
]),
]
组件内部的相应功能：
unpinCard(pEvent) {
this.ifMinimized = this.ifMinimized === true ? false : true;
this.isPinned = this.isPinned === "pin" ? "unpin" : "pin";
}
The Issue:
所有功能都运行良好，但问题是每当我点击特定卡上的一个（图钉）图标时......如果在所有卡上执行操作，则表示所有卡都在一起最小化，并且还有所有卡（图标）图标卡片同时变得动画 .
我可以猜测，这是由于变量ifMinimized和ifPinned与所有通过ngFor生成的卡绑定 .
请帮助我理解如何绑定单个元素，以便如果单击一个元素的图标，则仅对该项执行操作，而不是对ngFor生成的所有元素执行操作 .
提前致谢 .
1 回答
只需将reportCard（r）传递给你的unpinCard函数，并在该卡上设置ifMinimized和isPinned：
r['ifMinimized'] = !r['ifMinimized']或者删除函数并在html中简单输入：