使用不變性時，懸停閃爍

Question

我有一個要顯示的簡單對象列表，因此我使用*ngFor創建組件。 每個組件都有css懸停效果，可更改其背景。 當我以不變的方式更改對象的屬性（用替換的一個對象創建新數組）時，關聯組件的背景經常閃爍。

列表組件：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'my-app',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <list-item *ngFor="let item of items"
      [item]="item"
      (toggle)="onToggle(item)"
    ></list-item>
  `,
})
export class AppComponent  {
  items = [
    { name: 'item1', toggled: false },
    { name: 'item2 ', toggled: true },
    { name: 'item3', toggled: false }
  ];

  onToggle(item) {
    const updatedItem = {
      ...item,
      toggled: !item.toggled
    };

    this.items = this.items.map(item => item.name === updatedItem.name ? updatedItem : item);
  }
}

列表項組件：

import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'list-item',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="container">
      <span>{{ item.name }}: {{ item.toggled }}</span>
      <button (click)="toggle.emit()">Toggle!</button>
    </div>
  `,
  styles: [`
    .container {
      width: 400px;
      height: 50px;
      border: 1px solid black;
      display: flex;
      padding: 20px;
      justify-content: space-between;
      align-items: center;
    }

    .container:hover {
      background-color: yellow;
    }
  `]
})
export class ListItemComponent {
  @Input() item: Item;
  @Output() toggle: EventEmitter<void> = new EventEmitter<void>();
}

export interface Item {
  name: string;
  toggled: boolean;
}

這是一個演示： https : //stackblitz.com/edit/angular-pmdjqu?embed=1&file= app/ listItem.component.ts

我該如何解決這個問題？ Angular壞了還是我做錯了什么？ 也許Angular不是為不可變的操作設計的？

（在React中不存在這樣的問題： https ://stackblitz.com/edit/react-bdul7z?file =index.js ）

Answer 1

您提供了反應列表的密鑰 。

<ListItem key={item.name}
          ^^^^^^^^^^^^^^^

但是忘了在angular中應用ngTrackBy選項

<list-item *ngFor="let item of items; trackBy: trackByFn"
                                      ^^^^^^^^^^^^^^^^^^

trackByFn(i, x) {
  return x.name;
}

角度示例