проблемы с ngOnChanges при обновлении массива

У меня есть массив, который обновляется из другого компонента (происходит обновление, и строки добавляются в массив, который я проверил с помощью тестовой кнопки), но ngOnChanges не обнаружит никаких изменений. Что не так с моим кодом?

Я применяю изменение: array.push().

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import {MatAccordion} from '@angular/material/expansion';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit, OnChanges {
  totalPrice = 0;
  constructor() { }
  @Input() Products: Array<String>;

  ngOnChanges() {
    console.log(this.Products)
  }

  ngOnInit(): void {
    
  }

}

typescript angular lifecycle ngonchanges
person Ni Tai    schedule 22.12.2020    source источник
comment
у вас есть ChangeDetectionStrategy.OnPush где-то в родительском компоненте?   -  person Misha Borisov    schedule 22.12.2020
comment
см. здесь: stackoverflow.com/questions/65228555/   -  person Moshezauros    schedule 22.12.2020
comment
эта ссылка об объектах, это массив   -  person Ni Tai    schedule 22.12.2020
comment
и ссылка не упоминает ничего о стратегии, которую вы упомянули   -  person Ni Tai    schedule 22.12.2020
comment
первый комментарий был написан кем-то другим, и в этом отношении массив и объект ведут себя одинаково   -  person Moshezauros    schedule 22.12.2020
comment
проверьте это: angular.io/api/core/OnChanges   -  person Shail_bee    schedule 22.12.2020

Ответы (1)


arrow_upward
2
arrow_downward

Вы используете неправильный синтаксис для ngOnChanges. Используйте следующее:

ngOnChanges(changes: SimpleChanges) {
   console.log(changes.Products.currentValue);
}

Также обратите внимание, что если ссылка на массив не изменится, указанный выше хук жизненного цикла не сработает. Если вы хотите, чтобы хук жизненного цикла запускался, меняйте ссылку каждый раз, когда вы добавляете элемент в массив. Например:

.ts

myArr = [];

add() {
  this.myArr = [...this.myArr, String(Math.random())];
  console.log(this.myArr)
}

.html

<button (click)="add()">Add more numbers</button>

<app-cart-component [Products]="myArr"></app-cart-component>
person Nicholas K    schedule 22.12.2020
comment
ничего не меняй - person Ni Tai; 22.12.2020
comment
просто упомянем изменение, которое я применяю, это array.push() - person Ni Tai; 22.12.2020
comment
Откуда вы применяете этот array.push()? - person Nicholas K; 22.12.2020
comment
из родительского компонента, который обновляет этот ввод... в любом случае я решил отказаться от массива, и он работает! но было бы неплохо понять, как я должен был сделать эту работу - person Ni Tai; 22.12.2020
comment
Я включил еще несколько объяснений вместе с примером, надеюсь, это поможет! - person Nicholas K; 22.12.2020
comment
так что теперь, как и мой код, вы ожидаете, что вы используете оператор распространения вместо arr.push(). это то, что делает diffrence? если так то спасибо - person Ni Tai; 22.12.2020
comment
и, кстати, синтаксис, который я использовал для onChanges, не является неправильным, он отлично работает без массива - person Ni Tai; 22.12.2020
comment
Я каждый раз меняю ссылку на массив и добавляю новый элемент. OnChanges обнаружит это только при изменении ссылки, а не отдельного элемента той же ссылки. - person Nicholas K; 22.12.2020
comment
это действительно помогло, но вам придется удалить первую часть о синтаксисе ngOnChanges, чтобы я мог одобрить его, поскольку он дает вводящую в заблуждение информацию. спасибо! - person Ni Tai; 22.12.2020
comment
Согласно документам, это рекомендуемый способ его использования. Подробнее здесь - person Nicholas K; 22.12.2020