[英]Alternate the Angular material icon by clicking
我需要的是通过单击材料图标,该图标应根据“ts”文件中设置的值交替显示。 我正在使用公共变量来更改图标。 但是,由于我只使用一个变量,所有行都会产生效果。 此外,如果我使用单击项目的 id 控制它,则先前单击的值(图标)将替换为旧值(图标)。 供您参考,我正在通过 observable (API) 显示和保存数据。 因此无法从 API 中获取值并立即在列表中显示。 波纹管是 HTML 和“ts”的代码:
onClick(event, row) {
if (event.srcElement.innerText === 'panorama_fish_eye') {
this.statusIconTextTrue = 'check_circle';
taskStatus = 'FINISHED_COMPLETED';
archived = true;
timeFinishedActual = new Date().getTime();
} else {
this.statusIconTextTrue = 'panorama_fish_eye';
taskStatus = 'CREATED';
archived = false;
timeFinishedActual = null;
}
}
<mat-icon (click)="onClick($event, element)">
{{ statusIconID == element.taskuuid && statusIconTextTrue ? statusIconTextTrue : statusIconText }}
</mat-icon>
我苦苦挣扎了几天,以提出正确的逻辑来应对问题。 对此有何想法或可能是其他一些解决方案? 提前致谢。
Yasir,使用“状态”的值。 点击只改变状态,见stackblitz
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef> Status </th>
<td (click)="element.status=!element.status" mat-cell *matCellDef="let element">
<mat-icon>
{{ element.status?'check_circle' : 'block' }}
</mat-icon>
</td>
</ng-container>
如果您收到的数据中没有“状态”,您可以在订阅服务后轻松添加。 想象一下,你有一个服务,它返回一个具有唯一属性日期的数据数组,你可以做类似的事情
dataService.subscribe((res:any)=>{
res.forEach(x=>{
x.status=false;
})
this.data=res
})
注意:例如,状态只有两个值“true”和“false”,这就是点击变得如此容易的原因,例如(click)="element.status=.element.status"
可以有两个值 'finish ' 和 'unfinish' 然后列变得像
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef> Status </th>
<td (click)="element.status=element.status=='finish'?'unfinish':'finish'
mat-cell *matCellDef="let element">
<mat-icon>
{{ element.status=='finish'?'check_circle' : 'block' }}
</mat-icon>
</td>
</ng-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.