angular 8 如何在单击时更改 class of 1 div 而不是全部在 ngFor 循环中

Question

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

有没有办法改变组件中特定元素的class？

html

在这里我从点击的项目中获取了 id 就好了，但是我在点击时更改了 class，完成了一个任务。当我单击完成按钮时，循环 return 中的所有任务都已完成。我不确定如何在这里有效地使用 i 因为 onclick 我还发送了一个放置请求所以我不能向函数添加更多信息而不发送到我不需要它的数据库。 ..

<tr *ngFor="let task of tasks; let i = index;">

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

            <button mat-button
            class="btn delete"
            *ngIf="status"
            >✘</button>

分量

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);
}

console.log(item, index, this.tasks); returns id, -1, [0{task here}1{task here}]

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

我怎样才能实现我想要的目标？谢谢。

Answer 1

您可以尝试class绑定：

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

link 到文档：https://angular.io/guide/template-syntax#class-binding

Answer 2

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

component.html

<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>

component.ts

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

EDIT- 从 html 传递任务，使第二个参数可选

angular 8 如何在单击时更改 class of 1 div 而不是全部在 ngFor 循环中

angular 8 how to change class of 1 div instead of all in ngFor loop on click

class

onclick

indexof

angular