angular 8如何在单击时更改1 div的类而不是ngFor循环中的所有类

这是我能找到的最接近我所问的问题，但是他们手动应用索引，并且有多个元素，而我没有

是否有方法更改组件中特定元素的类

html

在这里，我可以从单击的项目中获得id，但是我在单击时更改了类，从而完成了一项任务。当我单击complete按钮时，循环中的所有任务都返回completed。我不知道如何在这里有效地使用I，因为onclick我也发送了一个put请求，所以我不能在不发送到我不需要的数据库的情况下向函数添加更多信息

console.logitem，index，this.tasks；返回id，-1，[0{task here}1{task here}]

我想我得到的是-1，因为实际id字段位于我单击的单个任务的-1位置

---

我怎样才能达到我想要达到的目标？谢谢。

您可以尝试类绑定：

[class.btn-lemon-complete]="status"

---

链接到文档：

您可以尝试使用此解决方案

component.html

---

编辑从html传递的任务，使第二个参数成为可选的

尽管如此，类的更改很好，但我只想为我单击的任务而不是所有任务更改它。为该任务添加属性，并使用该属性而不是状态。单击时切换该属性。完成后将其切换回。是的，谢谢！！我刚刚学会了如何将它绑定到字符串，因为它在我的数据库中是字符串而不是布尔值。非常有趣！

completeTask(taskId, data): any {
    this.status = true;
    this.triggerService.updateTask(taskId, data).subscribe(res => {
    });

    let item = taskId;
    let index = this.tasks.indexOf(taskId);
    console.log(item, index, this.tasks);
}

[class.btn-lemon-complete]="status"

<button mat-button
    class="btn"
    [ngClass]="task.status ? 'btn-lemon-complete' : 'btn-lemon' "
    [disabled]="task.status ? false : true"
    (click)="completeTask(task)"
>
{{ task.status ? 'Completed':'Complete Task' }}
</button>

completeTask(task, data?): any {
    this.triggerService.updateTask(task._id, data).subscribe(res => {
    });
    task.status=true;
}