Is there a way to display data based on the selected value in a more efficient manner? Currently, when clicking on a value from the list on the left side, new data is added next to the existing data. However, I would like the new data to replace the existing data each time a different value is clicked. Here's a visual representation of the current setup. https://i.sstatic.net/67lSq.png
I need help with improving this line of code (this.filteredСosts.push(c)) so that the data is not simply added alongside the existing data, but replaced when a new value is chosen.
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
for(let i of this.filteredIncome){
for(let c of costs){
if(c.costs_id==i.i_costs_id){
this.filteredСosts.push(c)
}
}
}
}
)
}
}
)
}
}
Here is how the html structure looks:
<div class="row">
<div class="col s12 m2">
<mat-list>
<h3 mat-subheader>Date</h3>
<mat-nav-list>
<mat-list-item *ngFor="let report of reports" class="center " (click)="onSelectedReport(report.report_id)">
<a>{{report.report_date | date: 'dd.MM.yyyy'}}</a>
<mat-divider></mat-divider>
</mat-list-item>
</mat-nav-list>
</mat-list>
</div>
<div class="col s12 m10">
<div *ngIf="selectedReport">
<div *ngFor="let i of filteredIncome">
<div *ngFor="let c of filteredСosts">
{{c.name}}
</div>
</div>
</div>
</div>
</div>