Onclick切换单个列表项的类别图标Angular 4 5 Todo应用程序
Onclick切换单个列表项的类别图标Angular 4 5 Todo应用程序
提问于 2018-06-02 23:49:24
我正在与此作斗争，并试图找到解决方案，但失败了。
我有这段代码，列出了所有项目的输入，我需要的复选图标是在点击时切换和关闭。目前，它可以切换所有图标，而不是单个图标。
<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
Stack Overflow用户
发布于 2018-06-03 01:12:07
您可以在task对象中添加status属性，结果如下所示：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50658590
复制相关文章
相似问题
腾讯云开发者
