Angular отражает изменения глобальной переменной в локальной переменной функции

Question

У меня возникла проблема при использовании модального ngx- bootstrap. У меня есть таблица в html, в которой используется значок редактирования, чтобы открыть модальное окно редактирования с предварительно заполненным значением столбца таблицы на входе. Вот так.

<tr *ngFor="let cat of categories; let i = index">
            <th>{{i+1}}</th>
            <td>{{cat.name}}</td>
            <td>
              <fa-icon
                class="is-icon text-primary mr-2"
                [icon]="faEdit"
                (click)="openModal(updateCategory, cat);">
              </fa-icon>
            </td>
          </tr>

openModal () установит cat в переменную категории в моем компоненте. вот так.

openModal(template: TemplateRef<any>, category?: Category) {
    if (category){
      this.category = category;
    }

    this.subscriptions.push(
      this.modalService.onHide.subscribe(() => {
        this.category = {} as Category;
        console.log(this.category);
        this.category = category;
        console.log(this.category, category);
        this.unsubscribe();
      })
    );

    this.modalRef = this.modalService.show(template, this.modalConfig);
  }

Переменная категории компонента используется в modalTemplate для рендеринга предварительно заполненного текста во входных данных, как это. обновлений компонентов, потому что я использую двустороннюю привязку, и это соответствует ожиданиям. но переменная локальной категории метода openModal () также изменилась. Любая помощь будет оценена. Если кому-то понадобится больше кода, дайте мне знать.