angular: односторонняя привязка переменных

Question

У меня сложная ситуация с переменными, использующими angular ..

мой компонент:

    bankAdd={};

    showAdd(){
        this.modify = false;
        this.add = true;
    }
    closeAdd(){
        this.add = false;
        this.bankAdd=new Bank();
    }

    showModify(bank){
        this.add = false;
        this.modify = true;
        this.bankAdd = bank;
    }

    closeModify(){
        this.modify = false;
        this.bankAdd = new Bank();
        console.log(this.bankAdd);
        console.log(this.banks.content);
    }

и HTML:

<div class="row">
  <div class="col-md-2" ></div>
  <div class="col-md-8 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Banques</h4>
          <div class="card-description float-r">
            <button class="btn btn-success btn-ms" (click)="showAdd()">Ajouter Banque</button>
          </div>
          <div class="table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>nom</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let bank_ of banks.content">
                  <td>{{bank_.name}}</td>
                  <td>

                    <!-- here when i click on the modify button it supposed to take -->
                    <!-- bank_ value and set it to "bankAdd" -->

                    <a rel="tooltip" title="Modifier" data-placement="top" 
                      class="text-success text-lg" (click)="showModify(bank_)" >
                      <i class="fa fa-edit fa-lg"></i>
                    </a>
                    <span class="m-r-10"></span>
                   <a rel="tooltip" title="supprimer" data-placement="top"
                    class="text-danger text-lg " (click)="onDeleteBank(bank_.id)">
                    <i class="fa fa-trash-o fa-lg"></i>
                  </a>
                  <span class="m-r-10"></span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-2" ></div>
</div>

<div class="wrapper fadeIn-My fadeOut-My" *ngIf="modify"> 
  <div class="element col-md-5 col-sm-10  grid-margin">
        <div class="card shadow-my">

          <!-- this button to close the form of updating (modify) -->

          <a rel="tooltip" title="Fermer" data-placement="top"
           class="text-danger text-lg pos-absolute right-0" (click)="closeModify()" >
           <i class="fa fa-times fa-lg "></i>
         </a>
          <div class="card-body">
            <form class="forms-sample" ngNativeValidate #f="ngForm" (ngSubmit)="onUpdateBank()">
              <fieldset>
                <legend class="card-title">Modifier Banque</legend>
                <hr>
                <div class="form-group">
                  <label for="name">Nom De Banque</label>
                  <input  required [(ngModel)]="bankAdd.name"   name="name"
                      type="text"  class="form-control" id="name" placeholder="Nom De Banque">
                </div>
                <button type="submit" class="btn btn-success mr-2 btn-block">Modifier</button>
             </fieldset>
            </form>
          </div>
        </div>
    </div> 
</div>

поэтому Моя проблема в том, что когда я нажимаю кнопку изменить , он устанавливает значение bank_ на * bankAdd
, а когда я нажимаю закрыть кнопка должна, чтобы ничего не произошло, но angular изменяет значение bank_ как показано на картинках .. введите описание изображения здесь

ps: когда я перезагружаю страницу, изменение исчезает, поэтому изменение происходит с angular .. что я хочу именно тогда, когда я нажимаю кнопку «Закрыть», мне нужны старые значения, мне не нужны значения чтобы измениться .. спасибо всем ..