Вкладка p-tabPanel, связанная с отображением ngx-smart-modal при динамическом добавлении вкладок

Question

В настоящее время я пытаюсь добавить динамические вкладки, которые имеют дочерний компонент. Внутри дочернего компонента есть несколько ngx-smart-modal моделей. Я могу создавать динамические вкладки с кнопкой закрытия на нем. Проблема возникает, когда имеется более одной вкладки.

вопрос

Экземпляр 1: я на первой динамически создаваемой вкладке и пытаюсь щелкнуть модель, представленную в пользовательском компоненте. Модель появляется на последней вкладке динамически созданной вкладки. (С последними деталями компонента и не желаемыми деталями компонента)

Экземпляр 2: если он имеет только одну динамически созданную модель, он работает отлично.

Код

HTML

<p-tabPanel [header]="doc.docName" leftIcon="ui-icon-web-asset" *ngFor="let doc of docProps; let i = index" [selected]="true" (onClose)="closeDocProps(doc)" [closable]="true">
   <app-child-component [docId]="doc.docId" ></app-child-component>
 </p-tabPanel>

app-child-component есть несколько моделей, представленных в нем.

app-child-component (HTML)

<ngx-smart-modal #myModal identifier="myModal">
<h1>Title</h1>
  <p>Some stuff...</p>
  <button (click)="myModal.close()">Close</button>
</ngx-smart-modal>

TS (родительский компонент)

по операции щелчка документа в родительском компоненте

this.docProps.push({
  docId: document.id,
  docName : document.docTitle
});
this.changeDetectorRef.detectChanges();
this.activeIndexNumber = this.docProps.length; // to open up the last tab clicked.

Кроме того, я меняю номер индекса вкладки с изменением вкладки.

onTabChange(event) {
      this.changeDetectorRef.detectChanges();
      this.activeIndexNumber = event.index;
  }

Есть ли что-то, что я делаю не так? Предложения приветствуются.

stackblitz:

https://stackblitz.com/edit/angular-uy3kf5