Значок переключения отдельных элементов списка на клавиатуре Angular 4 5 Todo-приложение - PullRequest
Новая
       9

Значок переключения отдельных элементов списка на клавиатуре Angular 4 5 Todo-приложение

0 голосов
/ 02 июня 2018

Я борюсь с этим и пытался найти решение, но не смог.

У меня есть этот фрагмент кода, который перечисляет все элементы из ввода, и мне нужно, чтобы при нажатии на значок галочки включался и выключался.На данный момент это переключение ВСЕХ значков, а не отдельных. 

 <p *ngFor="let task of tasks; let i = index" class=tasks @fade>
 <span class="task">
 <fa name="check" (click)="status=!status"  
[ngClass]="status ? 'check' : 'uncheck'"></fa>
{{task}}</span>
<button class="remove" (click)="removeItem(i)"><fa name="trash" 
class="delete"></fa></button>
</p>

CSS: 

.check{
   color: rgb(81, 255, 0);
   cursor: pointer;
}
.uncheck{
   color: red;
   cursor: pointer;
}

Любые предложения будут полезны.Хорошего дня

ОБНОВЛЕНИЕ:

Для кого-то, у кого есть подобная проблема, я нашел обходной путь.Просто поместите тег ввода в элемент списка и стилизуйте его так, как вы хотите.Он будет работать независимо для каждого элемента.

1 Ответ

0 голосов
/ 02 июня 2018

Вы можете добавить свойства status в объект task, и это приведет к чему-то вроде этого: 

<p *ngFor="let task of tasks; let i = index" class=tasks @fade>
    <span class="task">
        <fa name="check" (click)="task.status=!task.status"  
          [ngClass]="task.status ? 'check' : 'uncheck'"></fa>
        {{task}}
    </span>
    <button class="remove" (click)="removeItem(i)"><fa name="trash" 
      class="delete"></fa></button>
</p>
...