在不工作Angular 4的按钮之间切换
我正在开发一个角度4应用程序，我在其中创建了一个包含两个导航按钮的html页面。该页面主要包含两个div部分。单击表格按钮应理想地显示表格div，单击图表按钮应显示图表div。一次只能呈现一个div。点击它的那一刻没有带我到div部分。我如何在Angular 4中实现这一目标。
results.component.html - 主页 净现值分析 - 在结果html中呈现
UI
results.html
<app-assumptions-summary></app-assumptions-summary>
<app-base-strategy></app-base-strategy>
<div class="row">
<div class="col-12 test_feasibility--accordion">
<!-- Accordion -->
<div id="accordion" role="tablist">
<app-net-present-value-analysis></app-net-present-value-analysis>
<app-economic-value-analysis></app-economic-value-analysis>
<app-stress-test-analysis></app-stress-test-analysis>
<app-ending-surplus-analysis></app-ending-surplus-analysis>
</div><!-- Accordion End -->
</div>
</div>
</div>
results.component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-results',
templateUrl: './results.component.html'
})
export class ResultsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
净现值-analysis.html
<div class="card">
<!-- Net Present Value Analysis -->
<div class="card-header" role="tab" id="npva_heading">
<a [ngClass]="{'collapsed': !isExpanded}" data-toggle="collapse" href="javascript:void(0);" (click)="isExpanded = !isExpanded" role="button" [attr.aria-expanded]="isExpanded" aria-controls="accordion1" >
<h5 class="mb-0">Net Present Value Analysis</h5>
</a>
</div>
<div [ngClass]="{'show': isExpanded}" id="accordion1" class="collapse" role="tabpanel" aria-labelledby="accordion1_heading" data-parent="#accordion" [attr.aria-expanded]="isExpanded" style="">
<div class="card-body">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="table-tab" data-toggle="pill" href="#base-strategy-table--npva" role="tab" aria-controls="table" aria-selected="true">Table</a>
</li>
<li class="nav-item">
<a class="nav-link" id="chart-tab" data-toggle="pill" href="#base-strategy-chart--npva" role="tab" aria-controls="chart" aria-selected="false">Chart</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<!-- NPVA table -->
<div class="tab-pane base-strategy-table fade show active" id="base-strategy-table--npva" role="tabpanel" aria-labelledby="table-tab">
<div class="tb-container col-md-5 col-sm-12">
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6"></div>
<div class="tb-cell col-sm-6 col-md-5 col-6"><a href="#projection">View Projection</a></div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6"></div>
<div class="tb-cell col-sm-6 col-md-5 col-6"><h6>Captive Option</h6></div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6">Premium Paid</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">-142,927</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6">Tax Deduction</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">57,171</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6">Loan to Parent</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">0</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6">Capital Contribution/Distribution</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">-2500</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6">Dividend Distribution</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">0</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6">Terminal Value</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">9,997</div>
</div>
<div class="tb-row d-flex flex-row net-cost">
<div class="tb-cell col-md-7 col-sm-6 col-6">Net Cost</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">-78,198</div>
</div>
<!--Commercial Option-->
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6"></div>
<div class="tb-cell col-sm-6 col-md-5 col-6"><h6>Commercial Option</h6></div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6">Premium paid</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">-142,927</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6">Tax Deduction</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">57,171</div>
</div>
<div class="tb-row d-flex flex-row net-cost">
<div class="tb-cell col-md-7 col-sm-6 col-6">Net Cost</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">-85,756</div>
</div>
<!--Self Insurance Option-->
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6"></div>
<div class="tb-cell col-sm-6 col-md-5 col-6"><h6>Self Insurance Option</h6></div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6">Discounted Losses Paid</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">-141,901</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6">Discounted Tax Deduction</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">48,174</div>
</div>
<div class="tb-row d-flex flex-row net-cost">
<div class="tb-cell col-md-7 col-sm-6 col-6">Net Cost</div>
<div class="tb-cell col-sm-6 col-md-5 col-6">-72,260</div>
</div>
</div>
</div>
<!-- NPVA table -->
<!-- NPVA Chart -->
<div class="tab-pane base-strategy-chart fade" id="base-strategy-chart--npva" role="tabpanel" aria-labelledby="chart-tab">
<div class="tb-container col-md-5 col-sm-12">
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-md-7 col-sm-6 col-6"></div>
<div class="tb-cell col-sm-6 col-md-5 col-6">Graph comes here
<boxplotchart>
</boxplotchart>
</div>
</div>
</div>
</div>
<!-- NPVA Chart End -->
</div>
</div>
</div>
</div><!-- Card + Net Present Value Analysis End-->
净现值-analysis.component
import { Component, OnInit } from '@angular/core';
import { BoxPlotComponent } from "../../../../shared/HighCharts/BoxPlotChart";
@Component({
selector: 'app-net-present-value-analysis',
templateUrl: './net-present-value-analysis.component.html',
})
export class NetPresentValueAnalysisComponent implements OnInit {
isExpanded = false;
constructor() { }
ngOnInit() {
}
}
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？