Angular ngClass/ngIf 不重新渲染更改答案

【问题标题】：Angular ngClass/ngIf not rerendering on changesAngular ngClass/ngIf 不重新渲染更改
【发布时间】：2019-04-28 14:34:22
【问题描述】：

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

【问题讨论】：

setToFav 是做什么的？因为您想要的行为是 Angular 的工作方式，所以您的代码还有其他问题。无需刷新页面即可使用。你改变了changedetection策略吗？
这就是它的作用prntscr.com/nhx9u5
您永远不会修改实际的favSongs 数组，而是修改本地存储。您的组件不知道如何监听本地存储，所以这就是它不起作用的原因。提供给这个问题的答案建议将数组重新分配给一个新值，您已经在其中推送了最喜欢的新歌曲，这应该可以正常工作！

标签： javascript angular

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

在您的组件中，favSongs 永远不会更新：它会在 ngOnInit 中分配值（因此，在组件的生命周期中只有一次），仅此而已。 setToFav 仅操作本地存储（favSongs 不会自动更新，您必须明确更新）。

【讨论】：