Angular 了解如何分别绑定每个元素

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

为此，我考虑使用变量绑定这些元素，如（单击）=“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>
...

组件内部的相应功能：

unpinCard(pEvent) {
    this.ifMinimized = this.ifMinimized === true ? false : true;
    this.isPinned = this.isPinned === "pin" ? "unpin" : "pin";
}

问题：

所有功能都工作正常，但问题是每当我在特定卡上单击一个（pin）图标时。。如果对所有卡执行这些操作，则意味着所有卡将一起最小化，并且所有卡的（pin）图标将同时设置动画

我可以猜测，这是由于变量ifMinimized&ifpinted与通过ngFor生成的所有卡绑定在一起

请帮助我了解如何绑定单个元素，以便如果我单击一个元素的图标，操作将仅对该项目执行，而不是对ngFor生成的所有元素执行

提前感谢。

只需将报告卡（r）传递给您的未嵌入函数，并将ifMinimized和Ispined设置在该卡上：

r['ifMinimized']=！r['ifMinimized']

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

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

---

非常感谢你的回复。现在开始工作了。谢谢你的帮助我面临的一个问题。。如果我选择基于函数的方法，那么第一次单击图标时，动画不工作，但第二次开始工作。我已经在控制台中打印了r[ifMinimized]，第一次它是未定义的，但第二次（单击）它显示为false或true等等。你能解释一下为什么会这样吗？给变量ispined一个初始值（unpin或pin）抱歉延迟了回复。。我已经在构造函数中初始化了变量，但它仍然在发生。。。this.ifMinimized=false；this.ispined=“pin”——当您第一次设置ifMinimized和isPinned全局变量时，console.log显示undefined。我们只是把这些变量放在每个reportCards对象中。也许这就是你问题的根源。您必须访问对象内部的变量，而不是全局变量。

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