我正在尝试创建一个用户表来显示我的mongoDb中的所有用户。用户可以通过点击表中一行的按钮来关注或取消关注其他用户。如果当前用户已经关注了其中一个用户,我想显示取消关注按钮,反之亦然。
下面是一张ui的图片,给予你更好的理解,“volgen”的意思是跟随。
图片:table of users
我遇到的问题是我使用了一个名为“isFollowing(id:string)”在一个被称为infinite的 *ngIf表达式中。我不知道为什么。
我读过很多关于Angular 重新计算ngIf表达式的文章,在ngIf表达式中使用方法不是最好的做法。大多数建议声明一个布尔变量而不是使用方法。在我的例子中,这行不通,因为(un)follow按钮依赖于ngFor中提供的数据。有人知道我应该如何处理这个问题吗?
下面是isFollowing方法:
//check if the current user already follows the other user
isFollowing(otherUser: string | undefined): boolean {
console.log('isFollowing called from user-list.component.ts');
if (otherUser === undefined) {
SweetAlert.showErrorAlert('Er gaat iets mis, probeer het opnieuw..');
return false;
}
if (this.currentUser.followingUsers?.includes(otherUser)) {
SweetAlert.showSuccessAlert('Je hebt deze gebruiker ontvolgt.');
return true;
}
SweetAlert.showErrorAlert('Er gaat iets mis, probeer het opnieuw..');
return false;
}
下面是html:
<tbody *ngIf="users.length > 0">
<tr *ngFor="let user of filteredUsers; let i = index">
<th scope="row">{{ i + 1 }}</th>
<td>{{ user.firstName | titlecase }}</td>
<td>{{ user.lastName | titlecase }}</td>
<td>{{ user.city | titlecase }}</td>
<td *ngIf="isUser && !isFollowing(user._id)">
<a
(click)="followUser(user._id)"
class="btn customfriendbutton"
>
Volgen
</a>
</td>
<td *ngIf="isUser && isFollowing(user._id)">
<a
(click)="unfollowUser(user._id)"
class="btn customfriendbutton"
>
Ontvolgen
</a>
</td>
<td *ngIf="isAdmin">
<a
(click)="sweetAlertDeleteConfirmation(user._id)"
class="btn customdeletebutton"
>
Verwijderen
</a>
</td>
</tr>
</tbody>
1条答案
按热度按时间cwtwac6a1#
正确的方法是使用纯管道(在官方Angular文档中阅读更多关于这个主题的内容)。这意味着只有当数组示例更改时,才会重新计算该值(因此每次更改都需要为
followingUsers
属性定义一个新数组)。在您的示例中,可以创建一个
IncludesPipe
,如下所示:然后,您可以在视图中使用它,如下所示:
在这个模板示例中,我使用了简写的
then
和else
块,我认为这样更易读,并且条件只需要计算一次而不是两次。如果您不想在每次更改时将
followingUsers
更改为新数组,则需要手动触发更改检测,以使本示例正常工作。