Передайте переменную html в Javascript - PullRequest
Новая
       6

Передайте переменную html в Javascript

0 голосов
/ 04 июня 2018

Я использую 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 в javascript в <p-tabPanel>.Я думал, что при нажатии на панель я могу работать с заданным значением sheet.id.Но любые попытки, которые я предпринял, не принесли результатов.Итак, мой вопрос, как я могу передать переменную sheet.id в JavaScript или функцию JavaScript?

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

Вы можете иметь переменную с именем 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 там.

0 голосов
/ 04 июня 2018

Если вы хотите передать идентификатор листа при клике, вы можете сделать это: 

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