Всплывающие в угловых JS с использованием модальных не работает - PullRequest
Новая
       29

Всплывающие в угловых JS с использованием модальных не работает

0 голосов
/ 11 марта 2019

Я создаю базовое угловое приложение, в котором мне нужно иметь кнопку, которая при нажатии должна открыть всплывающее окно и отобразить диаграмму.

Вот моя кнопка, которая должна отображать всплывающее окно. 

<div style="padding-top:50px;padding-left:10px;">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" >
Diagnose
</button>
</div>

Вот мой код всплывающего окна 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="width:1140px;height:601px;left:70px;top:80px;border-radius:0px;">
<div class="modal-dialog" role="document" style="width:1140px;height:601px;margin:0px;border-radius:0px;">
<div class="modal-content" style="border-radius:0px;">
<div class="modal-header" style="padding: 18px 30px 18px 30px;">
<p class="modal-title" id="exampleModalLabel" style="font-size:24px;color:#434343;float:left;">Correlation Plot</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float:right;">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" style="width:1140px;height:523px;overflow-y:auto;">
<div class="corrBox">

<span><p class="cardText">Top 4 correlated features with Parent Satisfaction</p></span>
</div>
<div class="corrInfoBox" >
<canvas baseChart height="80px"
[datasets]="corr_barChartData"
[labels]="['']"
[options]="corr_barChartOptions"
[legend]=true
[chartType]="corr_barChartType"></canvas>
</div>
</div>
</div>
</div>
</div>

Проблема в том, что график появляется на экране даже без нажатия кнопки «Диагностика», и ничего не происходит, когда я нажимаю кнопку «Диагностика».

Screen shot of my application

Как связать мой щелчок по кнопке «Диагностика» для отображения гистограммы во всплывающем окне?

1 Ответ

1 голос
/ 11 марта 2019

И ваша кнопка, и ваше всплывающее окно являются частями одного и того же родительского компонента. Предположим, у вас есть следующее:

  • Текущий компонент страницы
    • Кнопка
    • Всплывающие

Ваш код будет разработан как таковой currentPage.component.html

<button [etc] (onClick)="openPopup()">Button Text</button>

currentPage.component.ts

public openPopup() {
     // your logic goes here
}

Имейте в виду, что вам нужно добавить модуль вашего всплывающего компонента внутри модуля вашей текущей страницы.

Если бы ваш вопрос и структура кода были более понятными, можно было бы получить больше информации.

...