Почему мой модальный режим перестает работать после того, как я покидаю компонент и снова вхожу в него?

Question

У меня есть два компонента, один из них имеет модальный режим, который отображается после нажатия пользователем кнопки.Этот модал имеет material table, который отображает некоторые данные.При первом запуске приложения я перехожу к компоненту с модальным режимом, нажимаю кнопку и вижу отображаемую таблицу, даже если закрываю и снова открываю свой модальный режим.

Однако, если я ухожукомпонент, который имеет модальное значение, перейдите к тому, в котором отсутствует модальное значение, повторно введите компонент, имеющий модальное значение, нажмите кнопку и откройте модальное окно, данные в material table будут отображаться только (отображаются)при нечетных щелчках по кнопке четные щелчки не показывают никаких данных в таблице ...

Данные передаются правильно, а источник данных таблицы заполнен, по какой-то причине он просто не отображается.

Я передаю данные material table от компонента без модалов компоненту с модальным через службу и от компонента с модальным через сам модал через событие @Input.Каждый раз, когда я нажимаю кнопку, событие @Input запускается правильно, и заполняется material table.

Я пробовал ChangeDetectorRef detectChanges(), но безуспешно.

Компонент без модального типа, похоже, не влияет ни на что, но "уничтожение" (оставление) компонента, имеющего модальное значение, так что я покажу только код из этого компонента и модального.

MyComponent.component.ts

private newProductRequest = [];

private onNewProductRequest(el: any) {
  $('.modal').modal('hide');
  this.newProductRequest = {...el};
  $('#createNewProductRequestModal').appendTo("body").modal('toggle');
}

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

MyComponent.component.html

<m-new-product-request #createNewProductRequestModal [data]="newProductRequest"></m-new-product-request>

MyModal.component.ts

private products = [];

@Input('data')
set data(data: any) {
  if (data !== undefined || data !== "") {
    this.products = data;
    this.setProducts();
  }
  //this.ref.detectChanges();
}

constructor(private ref: ChangeDetectorRef) { }

ngOnInit() {
  this.onModalHiddenEvent(this);
  this.setTableDataSource();
}

private setProducts() {
  this.onModalHiddenEvent(this);
  this.orders = [];
  for (let key in this.products) {
    this.orders.push(this.products[key]);
  }
  this.setTableDataSource();
}

private setTableDataSource() {
  this.dataSourceOrders = new MatTableDataSource(this.orders);
  this.dataSourceOrders.paginator = this.ordersPaginator;
}

private onModalHiddenEvent(self) {
  $('#createNewProductRequestModal').on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
  });
}

ОБНОВЛЕНИЕ :

Итак, что я заметил, так это то, что, если я оставляю компонент, в котором у меня есть модал, и повторно ввожу его, модал не будет должным образом уничтожен, потому что, если я сейчас вернусь к компоненту с модалом и открою его,Я открываю новый модал и старый ... Почему это происходит?