Angular шаблон добавляет данные вместо обновления

Question

при вызовах в сервис, данные добавляются в шаблон, а не обновляются. Я использовал changeDetectRef тоже

Например: - На новом zip вызывается drugCostService. Когда я меняю почтовый индекс, я получаю новые данные, эти новые данные добавляются к существующим данным. Для почтового индекса: -12345, данные aaaaaaaaaaaaa.

Для другого почтового индекса: - 78901, данные bbbbbbbb. Вместо того, чтобы показывать bbbbbbb, он показывает aaaaaaa и bbbbbbb на стороне шаблона

 constructor(
    private ref: ChangeDetectorRef) { }

    this.drugCostService.drugPlan(this.zipCode, this.fipsCode).subscribe((response) => {

              this.ref.markForCheck();
              this.drugCostTable = response;
        }}

я пытался this.ref.detectChanges();, но он делает то же самое

HTML код

<table id="drugCost">
  <tr>
    <th id="monthHeader"> </th>
    <th>Drug Name</th>
    <th>Phase</th>
    <th>Amount</th>
  </tr>
  <tr *ngFor="let element of dataSource">
    <td> {{element.month}} </td>
    <td>
      <table>
        <tr *ngFor="let item of element">
          <td>{{item.LabelName}}</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr *ngFor="let item of element">
          <td>{{item.Phase}}</td>
        </tr>
      </table>
    </td>

    <td>
      <table>
        <tr *ngFor="let item of element">
          <td>{{item.MemberCost}}</td>
        </tr>
      </table>
    </td>
  </tr>

</table>