angular - 需要根据地图函数中的条件进行过滤
问题描述
我通过传递charteries 在我的angular 4 应用程序中填充highchart。我需要根据条件过滤图表系列。我不确定如何根据地图函数中的条件添加过滤器。结果对象最终将包含charteries 对象，该对象又包含数据对象。数据对象的元素名称等于 Commercial option。我认为我自己编写的过滤器不正确，因为我看不到它过滤。
调试时 this.results 对象的结构
我要使用的过滤器是
.filter(x=> x.chartSeries.data.find(x=> x.name === "Commercial Option"));
并且条件将基于
if(!this.CommercialPremium)
如何在 TS 代码部分共享的代码中使用此条件并在我的地图函数中进行过滤
我想到的第二个选项是创建一个属性
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-->
Npv分析结果
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[];
}
Npv结果
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>;
}
BoxPlotSeries数据接口
export interface BoxPlotSeriesData {
low: number;
q1: number;
median: number;
q3: number;
high: number;
color: string;
name: string;
}
class SeriesGeneric<T> {
public data: T[];
}
解决方案
这是一个给你的例子。我试过了，它工作正常。
//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);
}
截屏：
注意：我正在使用示例数据。替换为您的实际数据。
推荐阅读
- php - 如何在 codeigniter 中使用来订购
- reactjs - 在 React 中传递一个函数来选择 html
- typo3 - TYPO3 9 和 Flux：多次添加元素/部分/容器
- angular - 如何将日期对象从日期选择器传递给方法
- python - 测试没有用户名的 AbstractUser 的 Django create_user
- c# - 如何在 with 表达式中访问记录的原始值
- sql - 如何连续提取每一年
- javascript - 如何将输入数组传递给节点 Js 查询选择器 - cloudant
- windows - ldap 与 sasl + gssapi 和 windows api 绑定
- odoo - 如何在搜索视图中使用自定义模块“时间段”？[Odoo13] [社区]