Question

使用不可变模型对象数组时，我无法使CSS转换工作。

角度是否需要对属性进行就地更新才能使这些更新，或者我做错了什么？

例如：（https://plnkr.co/edit/PBSPtk9vMig7cxnHoJqA）

export class Box {
  constructor(public selected:boolean){
  }
}

function toggle(box:Box):Box{
  return new Box(!box.selected)
}

@Component({
  selector: 'my-app',
  template: `
  <ul>
  <li *ngFor="let box of boxes">
   <div 
    style="display:inline-block; width: 20px; height:20px; transition: 1s; margin:5px; cursor:pointer;"
    [ngStyle]="{'background': box.selected?'green':'red'}"
    > </div>
    <button (click)="toggle_in_place(box)">toggle (in-place)</button>
    <button (click)="toggle_replace_box(box)">toggle (replace box)</button>
    <button (click)="toggle_replace_array(box)">toggle (replace array)</button>
   </li>
   </ul>
  `,
})
export class App {

  boxes: Box[];

  constructor() {
    this.boxes = [new Box(true), new Box(false), new Box(true)];
    }

  toggle_in_place(box:Box){
    box.selected=!box.selected;
  }

  toggle_replace_box(box:Box){
     const index = this.boxes.indexOf(box);
     this.boxes[index]=toggle(box);
  }

  toggle_replace_array(box:Box){
    this.boxes = this.boxes.map(v=>v===box?toggle(v):v);
  }
}

这里我试图通过

设置div的颜色

[ngStyle]="{'background': box.selected?'green':'red'}"

box.selected可以通过以下方式更新：

就地更改属性（toggle_in_place），
替换'box'模型（toggle_replace_box）
替换整个数组（toggle_replace_array）。

但是toggle_in_place是唯一一个导致可见转换的人。

这只是我必须忍受的事情吗？

Answer 1

这里发生了什么：当数组更改时，ngFor将新数组中的对象引用与旧数组进行比较，并重新呈现已更改的任何元素，这会破坏css转换。

要解决此问题，可以为ngFor提供跟踪功能，然后使用该功能代替参考比较。

要修复，请指定跟踪函数以使用id而不是对象引用：

dev

有使用它：

master

实施例： https://plnkr.co/edit/4OXemdSf1Hsm1NU6ZhzT

Answer 2

我认为这是你必须要忍受的。在后两种情况下，由于您每次都要创建一个新的盒子实例，因此无需转换。

你可能会制作一个基本上是盒子包装的组件，并且可以通过＆＃34;转换＆＃34;布尔值到它的构造函数。解决方法很大程度上取决于用例。

Angular：ngFor中不可变模型的动画

2 个答案: