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的东西，当您更新类时，组件将重新呈现。

Answer 1

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

在轨道阵列中添加轨道将使绑定的对象发生变异，但不会更改其引用，也不会触发更改检测。

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

在setToFav中，您可以进行faveSongs = faveSongs.push(track.id).slice();左右。

Answer 2

在您的组件中，favSongs永远不会更新：它会在ngOnInit中分配值（因此，在组件的生存期内一次），仅此而已。 setToFav仅操作本地存储（favSongs不会自动获取更新，您必须对其进行显式更新。）

Angular ngClass / ng如果未在更改时重新呈现

2 个答案: