[英]Pop up in angular js using modal is not working
我正在构建一个基本的角度应用程序,其中需要有一个按钮,单击该按钮应打开一个弹出窗口并显示图表。
这是我的按钮,应该会显示弹出窗口。
<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">×</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>
问题是该图甚至没有单击“诊断”按钮就出现在屏幕上,而单击“诊断”按钮后却什么也没有发生。
如何链接我的“诊断”按钮以在弹出窗口中显示条形图?
您的按钮和弹出窗口都是同一父组件的一部分。 因此,假设您具有以下条件:
您的代码将被设计为currentPage.component.html
<button [etc] (onClick)="openPopup()">Button Text</button>
currentPage.component.ts
public openPopup() {
// your logic goes here
}
请记住,您需要在当前页面的模块内添加弹出组件的模块。
如果您的问题和代码结构更加清晰,可能会提供更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.