更新数组时 ngOnChanges 的问题

Question

我有一个数组正在从另一个组件更新（更新正在进行并且字符串正在添加到数组中我已经用测试按钮检查过它）但是 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 {
    
  }

}

Answer 1

您使用的 ngOnChanges 语法不正确。使用以下内容：

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

另外请注意，除非数组的 reference 发生变化，否则不会触发上述生命周期挂钩。如果您希望触发生命周期挂钩，则每次将元素推送到数组时更改引用。例如：

.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>

更新数组时 ngOnChanges 的问题

problems with ngOnChanges when updating an array

lifecycle

typescript

ngonchanges

angular