时间戳

首页 > 解决方案 > 动态添加选项卡时，p-tabPanel 选项卡在呈现 ngx-smart-modal 时出现问题

javascript - 动态添加选项卡时，p-tabPanel 选项卡在呈现 ngx-smart-modal 时出现问题

问题描述

目前，我正在尝试添加具有子组件的动态选项卡，在子组件中，有几个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里面有几个模型。

应用子组件 (HTML)

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

TS（父组件）

on 父组件中的文档点击操作

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;
  }

有什么我做错了吗？非常欢迎提出建议。

堆栈闪电战：

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

标签： javascriptangularprimengngx-modal

解决方案

推荐阅读