typescript 在ngIf语句中使用自定义纯管道和布尔值时,数据显示不正确

qxsslcnc  于 2023-02-10  发布在  TypeScript
关注(0)|答案(2)|浏览(110)

我正在做一个网络项目,我需要友谊/跟随功能。我也有两个角色管理员和(常规)用户。用户可以跟随其他用户。管理员不能跟随用户。
一个用户可以通过点击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修复了我的问题。但是我想知道为什么,这样我就能更好地理解了。

bhmjp9jg

bhmjp9jg1#

您希望此代码如何工作:

(isUser) && (currentlyFollowing | includes : user._id)

它实际上是如何工作的,就像你写的那样:

(isUser && currentlyFollowing) | includes : user._id

因此,当isUser为false时,您的includes管道将接收一个布尔值false

true && [1,2,3] => [1,2,3]
false && [1,2,3] => false

要修复-添加一些()

<div
  *ngIf="
    isUser && (currentlyFollowing | includes : user._id);
    then unfollowTemplate;
    else followTemplate
  "
></div>

(note:手动在沙箱上重新加载内置浏览器,它的行为有点错误)

w46czmvw

w46czmvw2#

我假设isUser && currentlyFollowing语句首先被计算,结果是boolean,然后这个boolean值被传递到你的includes管道,因此你的array.includes is not a function错误。
我建议您通过检查管道中的类型(值)来开始调试。
如果是这种情况,请使用括号覆盖运算符优先级,如下所示:isUser && (currentlyFollowing | includes : user._id) .

相关问题