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

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

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

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

Предположим, что первый выбранный ID соответственно (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


typescript angular ngonchanges
person Nikson    schedule 07.05.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

person Karsten Schaefers    schedule 07.05.2018