Нажатие кнопки вызывает рябь на других

Question

У меня есть угловое приложение, работающее с некоторыми кнопками (все они имеют mat-button -tag).Если я нажму одну из этих кнопок, то риффл будет показан и на других (которые не были нажаты)

Этот рисунок должен продемонстрировать, что если я нажимаю кнопку «Выбрать клиента», то в диалоговом окне закрытиекнопка получает винтовку.

Как вы можете видеть здесь, если я нажму кнопку + или -, то на 2 строки ниже того же (так что + или -)кнопка получает винтовку.

Я уже пытался дать им идентификаторы, но это ничего не помогло.

Эта кнопка открываетсядиалоговое окно

<mat-grid-tile colspan="5">
  <button style="padding: 0px; background-color: lightgrey" mat-button *ngIf="isAnonymous()" (click)="selectCustomer()">Select customer</button>
  <button style="padding: 0px; background-color: lightgrey" mat-button *ngIf="!isAnonymous()" (click)="removeCustomer()">Remove customer</
</mat-grid-tile>

Эта кнопка должна добавить только один элемент в список и увеличить счетчик (это панель справа)

<cdk-virtual-scroll-viewport class="items" itemSize="50" class="items">
  <div *cdkVirtualFor="let merch of getBasket() | keyvalue" >
    <!-- 1. row -->
    <mat-grid-list cols="11" rowHeight="1:2">
    ....
    <mat-grid-tile rowspan="1" colspan="1">
      <button mat-icon-button (click)="removeFromBasket(merch.key)">
        <i class="fas fa-minus"></i>
      </button>
    </mat-grid-tile>
    ....
    </mat-grid-list>
    <mat-divider></mat-divider>
  </div>
</cdk-virtual-scroll-viewport>

Если я нажму одну кнопку,винтовка должна быть показана только для этой, и никакие другие кнопки не должны фокусироваться.