我正在做一个网络项目,我需要友谊/跟随功能。我也有两个角色管理员和(常规)用户。用户可以跟随其他用户。管理员不能跟随用户。
一个用户可以通过点击Follow(“Volgen”)按钮来关注另一个用户。如果用户已经关注了一个用户,则会显示unfollow(“ontvolgen”)。使用自定义纯管道,我可以检查用户是否已经关注了一个用户。
用户可以看到跟随或取消跟随按钮。管理员只能看到删除按钮。
这是管道的代码:
@Pipe({
name: 'includes',
pure: true,
})
export class IncludesPipe<T> implements PipeTransform {
transform(array: T[], item: T): boolean {
return array.includes(item);
}
}
这是在html中使用自定义创建的“includes”管道:
<div
<table class="table tableborder table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Voornaam</th>
<th scope="col">Achternaam</th>
<th scope="col">Stad</th>
<th *ngIf="isUser || isAdmin" scope="col"></th>
</tr>
</thead>
<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>
<div
*ngIf="
currentlyFollowing | includes : user._id;
then unfollowTemplate;
else followTemplate
"
></div>
<ng-template #followTemplate>
<td>
<a
(click)="followUser(user._id)"
class="btn customfriendbutton"
>Volgen</a
>
</td>
</ng-template>
<ng-template #unfollowTemplate>
<td>
<a
(click)="unfollowUser(user._id)"
class="btn customcancelbutton"
>Ontvolgen</a
>
</td>
</ng-template>
<td *ngIf="isAdmin">
<a
(click)="sweetAlertDeleteConfirmation(user._id)"
class="btn customdeletebutton"
>
Verwijderen
</a>
</td>
</tr>
</tbody>
<tbody *ngIf="users.length === 0">
<td colspan="5">
<h2 class="text-center">Er zijn geen leden gevonden!</h2>
</td>
</tbody>
</table>
我用一个布尔值跟踪当前登录用户的角色:“isUser”。直到我在ngIf语句中添加管道所在位置的另一个表达式之前,它一直工作得很好:
<div
*ngIf="
isUser && currentlyFollowing | includes : user._id;
then unfollowTemplate;
else followTemplate
"
></div>
当IM登录管理员帐户,因此isUser等于假,数据没有正确加载。第一个图像显示正确的数据:Correct data第二张图像显示缺失数据:Incorrect data
正如你可以看到一些行的数据丢失和删除按钮不会显示在每一行。
我不明白为什么在将isUser添加到ngIf语句中时数据不能正确加载。我希望两个ng模板都不显示,并且每行都显示“verwijderen”(删除)按钮。不知何故,ngIf中的isUser破坏了它。
这是我在控制台中得到的错误:error in console
从ngIf语句中删除布尔值isUser修复了我的问题。但是我想知道为什么,这样我就能更好地理解了。
2条答案
按热度按时间bhmjp9jg1#
您希望此代码如何工作:
它实际上是如何工作的,就像你写的那样:
因此,当isUser为false时,您的
includes
管道将接收一个布尔值false
:要修复-添加一些
(
和)
:(note:手动在沙箱上重新加载内置浏览器,它的行为有点错误)
w46czmvw2#
我假设
isUser && currentlyFollowing
语句首先被计算,结果是boolean,然后这个boolean值被传递到你的includes
管道,因此你的array.includes is not a function
错误。我建议您通过检查管道中的类型(值)来开始调试。
如果是这种情况,请使用括号覆盖运算符优先级,如下所示:
isUser && (currentlyFollowing | includes : user._id)
.