我正在处理一个Angular项目,在其中我需要根据一个变量来选择一个类或另一个类(并且它们必须实时更改,无需刷新)。
我尝试使用*ngIf/else和[ngClass],它们确实可以工作,但它们不会重新渲染。 只有在刷新网站时它们才起作用。
使用*ngIf/else:
使用 [ngClass]:
我尝试使用*ngIf/else和[ngClass],它们确实可以工作,但它们不会重新渲染。 只有在刷新网站时它们才起作用。
使用*ngIf/else:
<i
*ngIf="favSongs.includes(track.id); else plus"
(click)="setToFav(track.id)"
class="fa fa-check"
></i>
<ng-template #plus>
<i (click)="setToFav(track.id)" class="fa fa-plus"></i>
</ng-template>
使用 [ngClass]:
<i
(click)="setToFav(track.id)"
[ngClass]="{'fa fa-check': favSongs.includes(track.id),
'fa fa-plus': !favSongs.includes(track.id)}"
></i>
如之前所述,它确实可行,但只有在刷新时才有效。我正在寻找像React一样的东西,当您更新类时,组件会重新呈现。
setToFav
是做什么的?因为你想要的行为是 Angular 的工作方式,所以你的代码有其他问题。没有必要刷新页面才能使其工作。你改变了变更检测策略吗? - Daniel BfavSongs
数组,而是修改本地存储。你的组件不知道如何监听本地存储,所以它无法工作。对于这个问题提供的答案建议重新分配数组到一个新值,其中你已经添加了新的最爱歌曲,这应该可以正常工作! - Daniel B