Почему array.push обновляет представление компонентов ChangeDetection.onPush angular 6?

Question

У меня есть компонент Race в угловом приложении, которое содержит массив автомобилей. Все мои компоненты используют обнаружение изменений onPush.

У меня есть кнопка на компоненте гонки, которая делает только cars.push (новый автомобиль), и все дочерние компоненты обновляются в соответствии с этим.

Я не понимаю, почему представление обновляется, оно должно обновляться только при изменении ссылки.

(я сделал проверку и вижу, что ссылка равна)

Автомобильный компонент отображает только автомобиль.

кто-то может объяснить, почему это происходит?

компонент гонки 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`);
  }
}