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

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

0 голосов
/ 07 мая 2018

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

Accordionструктура Категория, группа, подгруппа

Здесь я хочу сделать следующее: когда пользователь выбрал категорию, группу и подгруппу, этот идентификатор передается дочернему компоненту, и 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

1 Ответ

0 голосов
/ 07 мая 2018

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

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

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

...