angular - 了解ngOnInit

我正在做一个关于角的UDIMY课程，遇到了这段代码。我有一个样例项目，它有一个添加项按钮，它在数组中添加一个新的项目，并在屏幕上显示更新的数组。
购物-编辑.component.ts

export class ShoppingEditComponent implements OnInit {

  @Input() ingredientsArray : Ingredient[];

  shoppingItemName : string = 'Test';
  shoppingItemAmount : number = 66;

  constructor(private shoppingListService : ShoppingListService) { }

  ngOnInit() {
  }

  onItemAdd(){
    console.log(this.shoppingItemName)
    this.shoppingListService.addIngredient(this.shoppingItemName, this.shoppingItemAmount);
  }

}

我有一个事件发射器，它在单击“添加”按钮时发出更新的数组。
购物单.service.ts

ingredientsChanged = new EventEmitter<Ingredient[]>();

addIngredient(name: string, value : number){
  this.ingredients.push(new Ingredient(name, value));
  this.ingredientsChanged.emit(this.ingredients.slice());
}

要显示列表，我使用shopping-list.component.ts

export class ShoppingListComponent implements OnInit {

  constructor(private shoppingListService : ShoppingListService){}

  ingredients : Ingredient[];


  ngOnInit() {
    this.ingredients = this.shoppingListService.getIngredients();
    this.shoppingListService.ingredientsChanged.subscribe(
      (ingredients : Ingredient[]) => {
        this.ingredients = ingredients;
      }
    )
    console.log("hello")
  }

}

由于Suffopi-List.Cuff.T.S的NGuniTy（）只运行一次，每次单击“添加”按钮时，如何显示更新的列表？

最佳答案

您的列表在ngOnOInit中没有更新。您只订阅了ngOnInit中的可观测数据。因此，每当您在订阅中收到新数据时，您正在更新一个变量，因此ngOnChanges将被触发，这将更新您的视图。

关于angular - 了解ngOnInit，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58164704/