Блог

У меня есть дочерний компонент, который отображает результат в таблице mat, источником которого является родительский компонент в качестве @Input.

Я использую компонент диалога в дочернем элементе для редактирования строк в таблице mat. Затем значение строки обновляется в базе данных.

Но проблема в том, что мои входные данные @не обновляются, поэтому я попытался создать новый источник данных, onChangedetector, но таблица не обновляется. Как только я обновляю страницу, таблица обновляется, потому что я получаю новые данные в качестве @Input.

Поэтому мой вопрос в любом случае заключается в том, чтобы обновить @Входные данные в дочернем компоненте (т. Е. Обновить родительский компонент, чтобы он отправлял новые входные данные после обновления из базы данных).

Я могу подумать, что один из способов сделать это-обновить входные данные@, вызвав службу, которая используется родительским компонентом в дочернем…

Есть ли какое-нибудь лучшее решение для этого?

Некоторое время назад я создал этот код, используя @Input и @Output. С помощью этих декораторов вы можете передавать значения между родительскими и дочерними компонентами. В этом примере, если есть какие-либо изменения во входных данных родительского компонента, функция set month выполняется снова.

Чтобы заметить, что в дочернем файле внесены изменения, вы используете функцию emit из вашего @Output.

Надеюсь, это поможет вам решить вашу проблему. Или, по крайней мере, дать вам некоторое представление о том, как его улучшить.

   @Input() 
  set month(data:any) {
    // data = {year: 2020, month: 4}
    this.GenerateDays(data.year, data.month); // 2019/Agosto (2019, 7) Ene=0
  }

  @Output() onDayChange = new EventEmitter();    

/////////////////////////////////////////////////////////////////////////////
  private GenerateDays (year:number, month:number) {
    // Logic to Generate Days           
  }

  public SelectDay (id:number) {    
    this.selectedDay = id;
    this.onDayChange.emit(this.selectedDay);
  }