Angular中实现点击span切换当前的样式

要求

点击当前span显示背景颜色，未点击的变成原来的样子。

<div class="box">
 
      <div class="chart-title" *ngFor="let trendChart of trendCharts">
        <span id="name" (click)="(showChart)">{{ trendChart.name }}</span>
      </div>
 
</div>

export class TrendComponent implements OnInit {
  trendCharts = [{ name: '【机构趋势图】',isActive: true }, { name: '【区域趋势图】', isActive: false}];
 
  public showChart() {
    console.log("点击");
  }
}

实现

<div class="box">
      <div class="chart-title" *ngFor="let trendChart of trendCharts;let i = index">
        <span class="name" (click)="showChart(i)"  [class.active]="trendChart.isActive">{{ trendChart.name }}</span>
      </div>
</div>

&.active {
                background-color: #0FE9FF;
                color: #020B20;
                font-weight: 600;
            }

export class TrendComponent implements OnInit {
  trendCharts = [{ name: '【机构趋势图】',isActive: true }, { name: '【区域趋势图】', isActive: false}];
  
  public showChart(index) {
    console.log("点击");
    for(var i = 0;i<this.trendCharts.length;i++) {
      this.trendCharts[i].isActive = false;
    }
    this.trendCharts[index].isActive = true;
  }
 
}

如图：