Angular ngClass/ngIf不会在更改时重新渲染

Question

我正在处理一个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一样的东西，当您更新类时，组件会重新呈现。

- Mr. Moretto

---

setToFav 是做什么的？因为你想要的行为是 Angular 的工作方式，所以你的代码有其他问题。没有必要刷新页面才能使其工作。你改变了变更检测策略吗？ - Daniel B

这是它的功能 http://prntscr.com/nhx9u5 - Mr. Moretto

你永远不会修改实际的 favSongs 数组，而是修改本地存储。你的组件不知道如何监听本地存储，所以它无法工作。对于这个问题提供的答案建议重新分配数组到一个新值，其中你已经添加了新的最爱歌曲，这应该可以正常工作！ - Daniel B

Answer 1

只有当绑定的值发生变化时，变更检测才会触发。对于基本类型，其值为实际值；对于对象，其值为其引用的值。

将曲目添加到曲目数组中将改变所绑定的对象，但不会更改它的引用，并且不会触发变更检测。

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

在setToFav中，您可以这样做：faveSongs = faveSongs.push(track.id).slice(); 或者其他方式。

- user11390576

Answer 2

在你的组件中，favSongs 从未被更新：它在 ngOnInit 中被赋值（因此，在组件的生命周期内只会发生一次），然后就没有其他变化了。 setToFav 只操作本地存储（favSongs 不会自动更新，必须显式地进行更新）。

- mbojko