<!--头部-->
<ion-header id="header">
  <div class="header-container">
    <ion-icon name="chevron-back-outline" size="large" (click)="goBack()"></ion-icon>
    <div class="left-title" (click)="toattention()" [style.color]="currentTab ? 'black' : 'gray'">关注</div>
    <div class="right-title" (click)="tofan()" [style.color]="currentTab ? 'gray' : 'black'">粉丝</div>
  </div>
</ion-header>
<ion-content>
  <!--关注列表-->
  <div *ngIf="currentTab">
    <ion-list lines="none" *ngFor="let attention of attentionList">
      <ion-item >
        <ion-avatar slot="start">
          <img [src]="attention.get('attentionID').avatar" />
        </ion-avatar>
        <ion-label>
          <span class="font"> {{attention.get('attentionID').name}} </span>
        </ion-label>
        <ion-button fill="clear" (click)="toggleFollow(attention)" 
        [ngClass]="{'dark': !attention.isFollowed}"  
        slot="end" class="follow-button">
        {{ attention.isFollowed ? '已关注' : '+&nbsp;关注' }}
        </ion-button>
      </ion-item>
    </ion-list>
  </div>
  <!--粉丝列表-->
  <div *ngIf="!currentTab">
    <ion-list lines="none" *ngFor="let fan of fanList">
      <ion-item >
        <ion-avatar slot="start">
          <img [src]="fan.get('UserID').avatar" />
        </ion-avatar>
        <ion-label>
          <span class="font"> {{fan.get('UserID').name}} </span>
        </ion-label>
        <ion-button fill="clear" (click)="tofanFollow(fan)"
        [ngClass]="{'dark': !fan.isFollowed}"  
        slot="end" class="follow-button">
        {{ fan.isFollowed ? '已关注' : '+&nbsp;关注' }}
        </ion-button>
      </ion-item>
    </ion-list>
  </div>


  </ion-content>
