0

我在包含汽车数组的角度应用程序上有 Race 组件。我的所有组件都使用 onPush 更改检测。

我在比赛组件上有一个按钮，该按钮仅使 cars.push(new Car) 和所有子组件视图根据此更新。

我不明白为什么视图会更新，它假设仅在参考更改时更新。

（我做了检查，我看到参考是相等的）

汽车组件只显示汽车。

有人可以解释为什么会这样？

种族成分 ts

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

@Component({
  selector: 'app-exp-race',
  templateUrl: './exp-race.component.html',
  styleUrls: ['./exp-race.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExpRaceComponent implements DoCheck {
  cars = [
    {id: 1, color: 'green'},
    {id: 2, color: 'blue'},
    {id: 3, color: 'black'}
  ]

  ngDoCheck(): void {
    console.log('RACE CHECK');
  }

  changeFirstCarColor() {
    this.cars[0].color = 'yellow';
  }

  addNewCar() {
    let x = this.cars;
    this.cars.push({
      id: 4,
      color: 'red'
    })

    console.log(this.cars === x)
  }
}

种族组件 html -

<h1>RACE</h1>
<div *ngFor="let car of cars">
  <app-exp-car [car]="car"></app-exp-car>
</div>

<button (click)="changeFirstCarColor()">Change First Car Color</button>
<button (click)="addNewCar()">Add New Car</button>

汽车零部件 ts -

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

@Component({
  selector: 'app-exp-car',
  templateUrl: './exp-car.component.html',
  styleUrls: ['./exp-car.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExpCarComponent implements DoCheck {
  @Input() car;

  ngDoCheck(): void {
    console.log(`CAR ${this.car.id} CHACK`);
  }
}
4

0 回答 0