Как очистить предыдущие значения из ngOnchanges на основе выбора в Angular4

Question

В моем компоненте приложения у меня есть аккордеон, идентификатор выбранного пользователем меню будет передан дочернему компоненту с помощью ngOnChanges, из дочернего компонента, вызывающего API на основе идентификатора выбранного компонента приложения.

Аккордеонная структура Категория, Группа, Подгруппа

Вот что я хочу сделать: когда пользователь выбрал категорию, группу и подгруппу, этот идентификатор передается дочернему компоненту, и также вызывается API.

Давайте предположим, что первые выбранные идентификаторы соответственно (100,101,102)

Теперь пользователь выбирает другую группу в той же категории, теперь API вызывается путем передачи с неправильными идентификаторами (100,200,102), здесь пользователь не выбрал какую-либо подгруппу, но значение взято из предыдущего значения.

Так как я могу сделать следующее

• 1, очистите значение подгруппы, когда пользователь выберет новую группу.
• 2. Очистите значение группы, когда пользователь выберет новую категорию.

Stackblitz Файл:

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-exbr5f?file=app%2Fchild%2Fchild.component.ts

Редактировать:

ngOnChanges(changes: SimpleChanges) {

    if (changes['C_code'].currentValue != "") {
      this.a = changes['C_code'].currentValue ;
      if (this.a != changes['C_code'].previousValue) {
        this.G_code = "";
        this.SG_code = "";
      }
    }

    if (changes['G_code'].currentValue != "") {
      this.b = (changes['G_code'].currentValue);
      if (this.b != changes['G_code'].previousValue) {
        this.SG_code = "";
      }
    }

  }

Stackblitz Файл:

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-9i1xzr?file=app/child/child.component.ts

Answer 1

Вы можете сделать это в вашем AppComponent, установив соответствующие значения обратно в null/empty в обработчиках событий следующим образом:

changeGroupCode(event: any) {
    this.groupCode = event;
    this.subGroupCode = null;
}

Затем в своем дочернем компоненте вы проверяете пустую / пустую строку для каждого значения перед вызовом API.