Понимание ngOnInit - PullRequest
Новая
       18

Понимание ngOnInit

2 голосов
/ 30 сентября 2019

Я делаю курс удеми по угловому и наткнулся на этот код. У меня есть пример проекта, который имеет кнопку Добавить элемент, который добавляет новый элемент в массив и отображает обновленный массив на экране.

shopping-edit.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);
  }

}

У меня есть источник событий, который генерирует обновленный массив при нажатии кнопки «Добавить».

shopping-list.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")
  }

}

, так как ngOnInit ()of shopping-list.component.ts запускается только один раз, как отображается обновленный список при каждом нажатии кнопки «Добавить»?

Ответы [ 3 ]

1 голос
/ 30 сентября 2019

Ваш список не обновляется в ngOnOInit. Вы подписываетесь только на наблюдаемое в ngOnInit. Поэтому, когда вы получаете новые данные в своей подписке, вы обновляете переменную, тогда из-за этого запускается ngOnChanges, что обновляет ваше представление.

0 голосов
/ 30 сентября 2019

Это больше связано с тем, как работают rxjs Observables, чем с ngOnInit. Подписки прослушивают события, пока они не будут отписаны. Если вы хотите, чтобы он взял только первый элемент, вы должны сделать это: 

this.shoppingListService.ingredientsChanged.pipe(take(1)).subscribe(
      (ingredients : Ingredient[]) => {
        this.ingredients = ingredients;
      }
    )
0 голосов
/ 30 сентября 2019

каждый раз, когда вы вызываете onItemAdd (), вы обновляете элемент, который находится в обслуживании (используя эту строку кода: this.shoppingListService.addIngredient(this.shoppingItemName, this.shoppingItemAmount);)

И HTML будет отображаться с использованием shoppingListService.ingredients (например: -<div *ngFor="let ingredient of shoppingListService.ingredients > //here you will get individual ingredient </div>)

...