需要根据地图函数
我通过传递图表系列在我的角度4应用程序中填充高图。我需要根据条件过滤图表系列。我不知道如何根据map函数中的条件添加过滤器。结果对象最终将包含chartseries对象，而chartseries对象又包含数据对象。数据对象的元素名称等于Commercial选项。我认为我自己写的过滤器是不正确的，因为我看不到它的过滤。
调试时this.results对象的结构
我想要使用的过滤器是
.filter(x=> x.chartSeries.data.find(x=> x.name === "Commercial Option"));
，条件将基于
if(!this.CommercialPremium)
如何使用此条件并在我的地图函数中过滤下面的TS Code
部分共享的代码我想到的第二个选项是创建属性
get getChartSeries() : Array<NpvAnalysisResult> {
if(!this.CommercialPremium) {
return this.results.filter(x=> x.chartSeries.data.find(x=> x.name == 'Commercial Option'));
}
}
Html代码
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"></div>
<div *ngFor="let result of results;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">
<app-box-plot-chart [series]="result.chartSeries" [moduleName]="moduleName">
</app-box-plot-chart>
</div>
</div>
TS代码
processResults() {
if (!this._npvResults) {
return;
}
this.results = this._npvResults.map((result: NpvAnalysis) => {
return createNpvAnalysisResult(result);
})
}
完整的组件代码
import { Component, Input, OnInit } from '@angular/core';
import { NpvAnalysis, NpvAnalysisResult, createNpvAnalysisResult } from '../../../../shared/models/results';
import { ReactiveComponent } from '@wtw/toolkit/src/utils/base.component';
@Component({
selector: 'app-net-present-value-analysis',
templateUrl: './net-present-value-analysis.component.html',
})
export class NetPresentValueAnalysisComponent extends ReactiveComponent implements OnInit {
isExpanded = false;
showTable = true;
showProjection = false;
public selectedAnalysis: NpvAnalysis = null;
public results: Array<NpvAnalysisResult> = [];
private chartSeries1 : Array<NpvAnalysisResult> = [];
public moduleName: string = '';
@Input() CommercialPremium : boolean;
@Input() set npvResults(value: Array<NpvAnalysis>) {
this._npvResults = value;
this.processResults();
}
private _npvResults: Array<NpvAnalysis> = [];
constructor() {
super();
}
ngOnInit() {
this.moduleName = 'npv';
}
processResults() {
if (!this._npvResults) {
return;
}
this.results = this._npvResults.map((result: NpvAnalysis) => {
return createNpvAnalysisResult(result);
})
}
//.filter(x=> x.chartSeries.data.find(x=> x.name === "Commercial Option"));
get getChartSeries() : Array<NpvAnalysisResult> {
if(!this.CommercialPremium) {
return this.results.filter(x=> x.chartSeries.data.find(x=> x.name == 'Commercial Option'));
}
}
showProjectionClick(i) {
const results = this._npvResults[i];
if (results) {
this.selectedAnalysis = results;
this.showProjection = true;
}
}
hideProjection() {
this.selectedAnalysis = null;
this.showProjection = false;
}
}
完整的HTML代码
<div class="card">
<!-- Net Present Value Analysis -->
<div class="card-header" role="tab" id="nva_heading">
<a [ngClass]="{'collapsed': !isExpanded}" data-toggle="collapse" href="javascript:void(0);" (click)="isExpanded = !isExpanded"
role="button" [attr.aria-expanded]="isExpanded" aria-controls="nva">
<h5 class="mb-0">
<span style="margin-left: -15px" class="col-sm-2" tooltip="{{'CAPTIVES.RESULTS.NVA.TITLE.TOOLTIP'|translate}}">
{{'CAPTIVES.RESULTS.NVA.TITLE.LABEL'|translate}}
</span>
</h5>
</a>
</div>
<div [ngClass]="{'show': isExpanded}" id="nva" class="collapse" role="tabpanel" aria-labelledby="nva_heading" data-parent="#nva"
[attr.aria-expanded]="isExpanded">
<div class="card-body">
<ul *ngIf="!showProjection" class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a href="javascript:void(0);" [ngClass]="!showTable ? '' : 'active' " class="nav-link " id="table-tab" data-toggle="pill"
role="tab" aria-controls="table" (click)="showTable = !showTable" aria-selected="true">{{'CAPTIVES.RESULTS.COMMON.TABLE'|translate}}</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" [ngClass]="showTable ? '' : 'active' " class="nav-link" id="chart-tab" data-toggle="pill"
role="tab" aria-controls="chart" (click)="showTable = !showTable" aria-selected="false">{{'CAPTIVES.RESULTS.COMMON.CHART'|translate}}</a>
</li>
</ul>
<div *ngIf="!showProjection" class="tab-content" id="pills-tabContent">
<!-- nva table -->
<div *ngIf="showTable" class="tab-pane fade show active" id="base-strategy-table--nva" role="tabpanel" aria-labelledby="table-tab">
<div class="tb-container">
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"></div>
<div *ngFor="let result of results; let i = index;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 view-projection-link">
<a href="javascript:void(0);" (click)="showProjectionClick(i)">{{'CAPTIVES.RESULTS.COMMON.VIEW_PROJECTION'|translate}}</a>
</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"></div>
<div *ngFor="let result of results;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">
<h6>{{'CAPTIVES.RESULTS.NVA.CAPTIVE_OPTION'|translate}}</h6>
</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{'CAPTIVES.RESULTS.NVA.PREMIUM_PAID'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"> {{result?.captiveInsPremiumPaidTotal|number:'.0-0' }} </div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{'CAPTIVES.RESULTS.NVA.TAX_DEDUCTION'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"> {{result?.captiveInsTaxDeductionTotal|number:'.0-0'}}</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{'CAPTIVES.RESULTS.NVA.LOAN_TO_PARENT'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{result?.captiveInsLoanToParentTotal|number:'.0-0'}}</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{'CAPTIVES.RESULTS.NVA.CAPITAL_CONTRIBUTION'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"> {{result?.captiveInsCapitalContributionTotal|number:'.0-0'}} </div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{'CAPTIVES.RESULTS.NVA.DIVIDENT_DISTRIBUTION'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{result?.captiveDividentDistributionTotal|number:'.0-0'}}</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{'CAPTIVES.RESULTS.NVA.TERMINAL_VALUE'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"> {{result?.captiveInsTerminalValueTotal|number:'.0-0'}}</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost">{{'CAPTIVES.RESULTS.NVA.CAPTIVE_NET_COST'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost"> {{result?.captiveNetCost|number:'.0-0'}}</div>
</div>
<!--Commercial Option-->
<div *ngIf=CommercialPremium>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"></div>
<div *ngFor="let result of results;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">
<h6>{{'CAPTIVES.RESULTS.NVA.COMMERCIAL_OPTION'|translate}}</h6>
</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{'CAPTIVES.RESULTS.NVA.PREMIUM_PAID'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"> {{result?.commInsPremiumPaidTotal|number:'.0-0'}} </div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{'CAPTIVES.RESULTS.NVA.TAX_DEDUCTION'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"> {{result?.commInsTaxDeductionTotal|number:'.0-0'}} </div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost">{{'CAPTIVES.RESULTS.NVA.COMMERCIAL_NET_COST'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost">{{result?.commNetCost|number:'.0-0'}} </div>
</div>
</div>
<!--Self Insurance Option-->
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"></div>
<div *ngFor="let result of results;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">
<h6>{{'CAPTIVES.RESULTS.NVA.SELF_INSURANCE_OPTION'|translate}}</h6>
</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{'CAPTIVES.RESULTS.NVA.DISCOUNTED_LOSSES_PAID'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{result?.selfInsDiscountedLossesPaidTotal|number:'.0-0'}}</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{'CAPTIVES.RESULTS.NVA.DISCOUNTED_TAX_DEDUCTION'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"> {{result?.selfInsDiscountedTaxDeductionTotal|number:'.0-0'}}</div>
</div>
<div class="tb-row d-flex flex-row ">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost">{{'CAPTIVES.RESULTS.NVA.SELF_INSURANCE_NET_COST'|translate}}</div>
<div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost">{{result?.selfNetCost|number:'.0-0'}}</div>
</div>
</div>
</div>
<!-- nva table -->
<!-- nva Chart -->
<div *ngIf="!showTable" class="tab-pane base-strategy-chart fade show active" id="base-strategy-chart--nva" role="tabpanel"
aria-labelledby="chart-tab">
<div class="tb-container">
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"></div>
<div *ngFor="let result of results; let i = index;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 view-projection-link">
<a href="javascript:void(0);" (click)="showProjectionClick(i)">{{'CAPTIVES.RESULTS.COMMON.VIEW_PROJECTION'|translate}}</a>
</div>
</div>
<div class="tb-row d-flex flex-row">
<div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"></div>
<div *ngFor="let result of results;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">
<app-box-plot-chart [series]="result.chartSeries" [moduleName]="moduleName">
</app-box-plot-chart>
</div>
</div>
</div>
<!-- Legend-->
<div class="col-12 legend">
<div>
<span class="captive"></span><span>{{'CAPTIVES.RESULTS.NVA.CAPTIVE_OPTION'|translate}}</span>
</div>
<div *ngIf=CommercialPremium>
<span class="commercial"></span><span>{{'CAPTIVES.RESULTS.NVA.COMMERCIAL_OPTION'|translate}}</span>
</div>
<div>
<span class="self-insurance"></span><span>{{'CAPTIVES.RESULTS.NVA.SELF_INSURANCE_OPTION'|translate}}</span>
</div>
</div>
<!-- Legend End-->
</div>
<!-- nva Chart End -->
</div>
<app-net-present-value-analysis-projection [results]="selectedAnalysis" [CommercialPremium]="commercialPremium" [show]="showProjection" (hideProjection)="hideProjection()"></app-net-present-value-analysis-projection>
</div>
</div>
</div>
<!-- Card + Net Present Value Analysis End-->
NpvAnalysisResult
export interface NpvAnalysisResult extends NpvAnalysis {
captiveNetCost: number;
commNetCost: number;
selfNetCost: number;
captiveInsPremiumPaidTotal: number;
captiveInsTaxDeductionTotal: number;
captiveInsLoanToParentTotal: number;
captiveInsCapitalContributionTotal: number;
captiveDividentDistributionTotal: number;
captiveInsTerminalValueTotal: number;
commInsPremiumPaidTotal: number;
commInsTaxDeductionTotal: number;
selfInsDiscountedLossesPaidTotal: number;
selfInsDiscountedTaxDeductionTotal: number;
boxplotChartSeries: any[];
}
NpvResults
NpvAnalysis extends NpvResults
export interface NpvAnalysis extends NpvResults {
strategyName: string;
}
导出界面NpvResults {
commInsYear: number[];
commInsPremiumPaid: number[];
commInsTaxDeduction: number[];
commInsDiscountedTaxDeduction: number[];
commInsDiscountedLossesPaid: number[];
commInsGraphData: number[];
selfInsYear: number[];
selfInsDiscountedLossesPaid: number[];
selfInsDiscountedTaxDeduction: number[];
selfInsGraphData: number[];
captiveInsYear: number[];
captiveInsPremiumPaid: number[];
captiveInsTaxDeduction: number[];
captiveInsLoanToParent: number[];
captiveInsCapitalContribution: number[];
captiveDividentDistribution: number[];
captiveInsTerminalValue: number[];
captiveInsGraphData: number[];
chartSeries: SeriesGeneric<BoxPlotSeriesData>;
}
BoxPlotSeriesData接口
export interface BoxPlotSeriesData {
low: number;
q1: number;
median: number;
q3: number;
high: number;
color: string;
name: string;
}
class SeriesGeneric<T> {
public data: T[];
}
1 个答案:
答案 0 :(得分：0)
以下是您的示例。我尝试了它并且它正在工作。
//here iam declared sample variable
public Results: any;
constructor() {
//here iam assigning sample data related to you.
this.Results = {
chartSeries: {
data: [
{
color: "#123",
high: 12312,
low: 12211,
median: 11,
name: "Captive Options",
q1: 12121,
q2: 1123213
},
{
color: "#123",
high: 12312,
low: 12211,
median: 11,
name: "Commercial Option",
q1: 12121,
q2: 1123213
},
{
color: "#123",
high: 12312,
low: 12211,
median: 111,
name: "Commercial Option",
q1: 12121,
q2: 1123213
},
]
}
}
console.log("Results", this.Results);
let finalData: any[] = [];
//here iam comparing name field as commercial option.
finalData= this.Results.chartSeries.data.filter(o => o.name.toLowerCase() == "commercial option");
console.log("Final Data", FinalData);
}
截图：
注意： 我正在使用样本数据。替换为您的实际数据。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？