如何结合离子4中的离子按钮?

时间:2019-06-14 05:04:53

标签: angular ionic4

我正在制作类似Instagram的应用,以便用户可以关注,取消关注,获取用户关注和关注者的列表。在下面,我将显示以下用户列表,在这里我想绑定到“关注/取消关注”按钮。

page.html

 <ion-item lines="none" *ngFor="let u of user" (click)="openuserProfile(u.UserId)">
  <ion-avatar slot="start">
    <img [src]="profileImgDomain + u?.ProfileImage">
  </ion-avatar>
  <ion-label>
    <h2>{{u?.Name}}</h2>
    <p>{{u?.UserName}}</p>
    <p>{{u?.Bio}}</p>
  </ion-label>
  <ion-button slot="end" (click)="toggleFollow(u.UserId);$event.stopPropagation();" fill="outline"
    size="small" shape="round" *ngIf="u?.IsFollow == 0">
    <span>Follow</span>
  </ion-button>
  <ion-button slot="end" (click)="toggleFollow(u.UserId);$event.stopPropagation();" fill="solid"
    size="small" shape="round" *ngIf="u?.IsFollow == 1">
    <span>Following</span>
  </ion-button>
</ion-item>

page.ts

getuserlist() {
 const value: {
   UserFollowId: string,
 } = {
   UserFollowId: this.useruid,
 };
 this.apiService.getFollowingUsers(value).then((data) => {
   this.user = data;
   console.log(data);
   console.log("IsFollow", this.user.IsFollow);
   if (!this.user.IsFollow) {
     this.IsFollow = false;
     this.btnfilltype = 'outline';
   } else if (this.user.IsFollow) {
     this.IsFollow = true;
     this.btnfilltype = 'solid';
   } else {
     alert("User not valid");
   }
 });
}

toggleFollow(UserId: string) {
const value: {
  logedUserId: any,
  userFollowId: string,
} = {
  logedUserId: this.currentUserId.__zone_symbol__value,
  userFollowId: UserId,
};
this.apiService.follow(value).then(async (success) => {
  console.log("succ", success);
  if (success = 0) {
    console.log(success, "Update success.");
    this.IsFollow = !this.IsFollow;
    this.btnfill = !this.btnfill;
    this.btnfilltype = 'outline';
  } else {
    this.IsFollow = !this.IsFollow;
    this.btnfill = !this.btnfill;
    this.btnfilltype = 'solid';
  }
}, error => {
  console.log("Error", error);
});

}

我尝试了一下,但是切换按钮不起作用。

0 个答案:

没有答案