如何显示所选值上的数据？

Question

如何显示所选值的数据？也就是说，在左侧会有一个值列表，通过单击这些值之一，该值的某些数据将显示在旁边，如果单击另一个值，则将显示新数据，并且以前会消失。目前，每次按下该值时，数据便会简单地并排添加。这是它的样子。

因此，如何解决（this.filteredСosts.push(c)）问题，以便接下来不仅仅添加数据，而且如果选择了另一个值也可以更改数据。

  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)
                    }
                  }
                }
              }
            )
          }
        }
      )
    }
  }

html：

<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>

Answer 1

尝试清除

this.filteredСosts = [];

Answer 2

在获取时只需初始化this.filteredСosts。

      if (this.costsService) {
        this.costsService.fetch().subscribe(costs => {
          this.filteredСosts = []
          ...