Как изменить цвет только одной кнопки?

Пожалуйста, попробуйте с индексом в ngFor

HTML

<ion-item *ngFor = "let friend of friendsList;let i = index">
      <ion-avatar item-start>
        <img src = {{friend.img}}>
      </ion-avatar>
      <button ion-button color = "rank" class = "avat"> </button>
      <h2>{{friend.name}}</h2>
      <p>{{friend.status}}</p>
      <button (click) = "curIndex = i" ion-button round [color] = "curIndex == i ? 'rank' : 'primary'" item-end>+Add</button>

    </ion-item>

объявить эту переменную в файле .ts

curIndex:number = null;

Обратитесь к stackblitz демонстрация

Вы можете попробовать это, как в этом примере, добавив свойство цвета к объекту и изменив свойство цвета этого объекта при нажатии

 <ion-list> 
    <ion-item *ngFor = "let friend of friendsList">
          <ion-avatar item-start>
            <img src = {{friend.img}}>
          </ion-avatar>
          <button ion-button color = "rank" class = "avat"> </button>
          <h2>{{friend.name}}</h2>
          <p>{{friend.status}}</p>
          <button (click) = "toggleNamedColor(friend)" ion-button round color = "rank" [color] = "friend.ionicNamedColor" item-end>+Add</button>

        </ion-item>

      </ion-list>

И в ц

public toggleNamedColor(friend): void {
      if (friend.ionicNamedColor === 'rank') { 
        friend.ionicNamedColor = 'primary'
      } else {
        friend.ionicNamedColor = 'rank'
      }
  }