将html变量传递给Javascript

Question

我在Web应用程序上将Tabular的Angular与PrimeNG一起使用。 我有以下问题：

<div *ngFor="let project of projects">
<div *ngIf="project.id === triggerProjectIdRefresh()">
  <div *ngFor="let dashboard of project.dashboards; trackBy: dashboardTrack()">
    <div *ngIf="dashboard.id === triggerDashboardIdRefresh()" >
      <!--bottom toolbar-->

      <!-- Tab system -->


        <p-tabView id="tabView" [controlClose]="true" (onChange)="setActiveTabDeleteable()" (onClose)="deleteConfirmation(sheet.id)" class="tabGroup" orientation="bottom">
          <div *ngFor="let sheet of dashboard.sheets; trackBy: trackSheet()" > <!-- alluser sheets -->
            <p-tabPanel (mousedown)="tabId(sheet.id)" [header]="sheet.name" *ngIf="sheet.type === 'enduser'" >

              <!--tabbody-->
              <p-card class="middlecardSheet"> <!-- widget field is child of tab-->
                <app-display-widgets style="{border: #7A7A7A 2em solid;}" *ngIf="sheet.id === refreshCurrentSheet()" [dashboardID]="dashboard.id"></app-display-widgets>
              </p-card>

            </p-tabPanel> ...

在<p-tabView>元素中，我设置了一个函数，当关闭水龙头时会调用该函数。 该函数需要一些其他信息来进行后台处理，因此我要传递sheet.id。 问题在于，由于层次结构，纸张被定义为下面的一个元素。 所以我试图以任何方式将sheet.id传递给<p-tabPanel>的javascript。 单击面板时，我感到很兴奋，可以使用给定的sheet.id 。 但是我在没有可行的解决方案的情况下做出了任何尝试。 所以我的问题是，如何将变量sheet.id传递给javascript或javascript函数？

Answer 1

如果您希望在点击时传递工作表ID，则可以按照以下步骤操作：

<p-tabPanel (click)="tabId(sheet.id)" [header]="sheet.name" *ngIf="sheet.type === 'enduser'" >

Answer 2

您可以拥有一个名为selectedSheetId的变量，然后打开

(mousedown)="selectedSheetId = sheet.id"

这样

(onClose)="deleteConfirmation(selectedSheetId)" 

将按预期工作。

如果mousedown在p-tabPanel上不起作用，

<p-tabPanel header="Header 1">
    <button class="btn btn-secondary-live" 
                (click)="selectedSheetId = sheet.id">Click</button>
</p-tabPanel>

甚至此处的Div标签也可以为您提供帮助。

另外，您可以依靠p-tabView的索引[activeIndex] =“ activeTab”并在其中的sheetId之间建立关联。