我正在制作类似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);
});
}
我尝试了一下,但是切换按钮不起作用。