时间戳

首页 > 解决方案 > Angular ngClass/ngIf 不重新呈现更改

javascript - Angular ngClass/ngIf 不重新呈现更改

问题描述

我正在开发一个 Angular 项目，我需要根据一个变量来设置一个或另一个类（并且它们必须实时更改，无需刷新）。

我尝试使用 *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 的东西，当您更新类时，组件会重新呈现。

标签： javascriptangular

解决方案

更改检测仅在绑定的值发生更改时触发。基元的值是它们的值，而对象的值是它们的引用值。

将轨道添加到轨道数组将改变绑定对象，但不会更改其引用，也不会触发更改检测。

这是使用不可变对象的原因之一。

在setToFav你可以这样做faveSongs = faveSongs.push(track.id).slice();左右。

推荐阅读