Привязка события на клик Angular

Question

пишу простой TODO list на Angular.

У меня есть такой код:

HTML:

<button mat-button color="warn" (click)="doneTask(taskIdx)">
            DONE
</button>

CSS:

.checked {
    text-decoration: line-through;
  }

JS:

  doneTask(taskIdx: number) {
    
  }

И я не могу разобратся как в методе doneTask вызвать изменения задания, должно зачеркнутся и забрать линию если клавиша была нажата еще раз.

Answer 1

Вам нужно использовать ngClass(https://angdev.ru/guide/directives/ngclass-ngstyle/) и привязать к нему свойство своего объета [ngClass]={checked:task.completed}.

<mat-nav-list>
    <mat-list-item *ngFor="let task of tasks; let taskIdx = index">
        <span mat-line [ngClass]="{checked:task.completed}">{{task.description}}</span>
        <button mat-button color="warn" (click)="removeTask(taskIdx)">
            DELETE
        </button>
        <button mat-button color="warn" (click)="doneTask(taskIdx)">DONE</button>
    </mat-list-item>
</mat-nav-list>

Дальше остается в коде только поменять его на нужное значения

doneTask(taskIdx: number) {
    this.tasks[taskIdx].completed = true;
}

БЛОГ НА HUSL

Привязка события на клик Angular

Ответы (1 шт):