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

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

0 个答案: