Is it possible to combine the two conditions into one within the function onSelectedReport()? Representing these conditions in HTML would result in:
HTML:
<div *ngFor="let report of reports">
<div *ngFor="let i of income">
<div *ngIf="report.r_income_id == i.income_id">
<div *ngFor="let c of costs">
<div *ngIf="i.i_costs_id == c.costs_id">
{{c.name}}
</div>
</div>
</div>
</div>
</div>
However, displaying data based on a specific selected identifier requires implementation in TypeScript. Without testing it yet, I am aware that the second condition may result in undefined due to the value of this.income.i_costs_id. These two conditions should ideally be merged into one. How can this be achieved?
TypeScript:
reports: Reports[]
income: Income[]
costs: Costs[]
selectedReport = null
filteredIncome = []
filteredСosts = []
onSelectedReport(reportId) {
this.selectedReport = this.reports.find(
el => {
return el.report_id === reportId
}
)
if (this.incomeService) {
this.incomeService.fetchAll().subscribe(
income => {
this.income = income
this.filteredIncome = this.income.filter(
(income) => income.income_id == this.selectedReport.r_income_id
)
}
)
}
if (this.costsService) {
this.costsService.fetch().subscribe(
costs => {
this.costs = costs
this.filteredСosts = this.costs.filter(
(costs) => costs.costs_id == this.income.i_costs_id
)
}
)
}
}