Question

我正在尝试在Angular 4中构建一个仪表板。在该仪表板中，我使用* ngFor迭代json（通过服务来）并在卡片中显示了一系列报告。在每张卡片中，标题上都有一些图标，点击后会执行一些操作...例如工具提示中的刷新，下载，弹出信息，pin-unpin等。

为此我想到使用变量绑定那些元素，如（click）=＆＃34; function（）＆＃34; ，以及 [@ animationTag] =＆＃34;变量＆＃34; ，如下所示：

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

问题：

所有功能都运行正常，但问题是每当我点击特定卡上的一个（图钉）图标时......如果对所有卡执行操作，则意味着所有卡一起最小化，并且（引脚）所有卡片的图标都会同时变得生动。

我可以猜测，这是由于变量 ifMinimized ＆amp;与通过ngFor生成的所有卡绑定的 ifPinned 。

请帮助我理解如何绑定单个元素，这样，如果单击一个元素的图标，则只对该项执行操作，而不是对ngFor生成的所有元素执行操作。

提前致谢。

Answer 1

只需将reportCard（r）传递给您的unpinCard函数，并在该卡上设置ifMinimized和isPinned：r['ifMinimized'] = !r['ifMinimized']

或删除函数并在html中简单输入：

(click)="r.ifMinimized = !r.ifMinimized"
*ngIf="!r.ifMinimized"

ng如何分别绑定每个元素

1 个答案: