Блог

Я использую stepper для своего проекта, и я просто хочу показать/скрыть div на основе выбранного продукта, но когда я пытаюсь обновить функцию click on done (), она не обновляется в html

.обслуживание

  public beneficiary = true;
  public children = true;
  changeProduct() {
    if (localStorage.getItem("product") === 'ci') {
      this.beneficiary = false;
      }
    if (localStorage.getItem("product") === 'life') {
      this.children = false;
      }
  }
 

.родитель

 constructor(public stepService: StepService) { }
  ngOnInit() {
    this.stepService.changeProduct();
   }
 

parent.html

 <div class="filled" *ngIf="stepService.children">
...
</div>

<div class="filled" *ngIf="stepService.beneficiary">
...
</div>
 

.ребенок

   done(index: number) {
    if (this.form.valid) {
      this.stepService.changeProduct();
    }
  }
 

Улучшите свой метод вот так

 changeProduct() {
    if (localStorage.getItem("product") === 'ci') {
      this.beneficiary = false;
      this.children = true;
      }
    if (localStorage.getItem("product") === 'life') {
      this.beneficiary = true;
      this.children = false;
      }