typescript 如何根据Angular中表行的数据隐藏/显示表行中的按钮?

r55awzrz  于 2023-01-27  发布在  TypeScript
关注(0)|答案(1)|浏览(129)

我正在尝试创建一个用户表来显示我的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>
cwtwac6a

cwtwac6a1#

正确的方法是使用纯管道(在官方Angular文档中阅读更多关于这个主题的内容)。这意味着只有当数组示例更改时,才会重新计算该值(因此每次更改都需要为followingUsers属性定义一个新数组)。
在您的示例中,可以创建一个IncludesPipe,如下所示:

@Pipe({
  name: 'includes'
})
export class IncludesPipe<T> implements PipeTransform {
  transform(array: T[], item: T): boolean {
    return array.includes(item);
  }
}

然后,您可以在视图中使用它,如下所示:

<td *ngIf="user.followingUsers | includes : user._id; then unfollowTemplate else followTemplate"></td>
<ng-template #followTemplate>
  <a (click)="followUser(user._id)" class="btn customfriendbutton">Volgen</a>
</ng-template>
<ng-template #unfollowTemplate>
  <a (click)="unfollowUser(user._id)" class="btn customfriendbutton">Ontvolgen</a>
</ng-template>

在这个模板示例中,我使用了简写的thenelse块,我认为这样更易读,并且条件只需要计算一次而不是两次。
如果您不想在每次更改时将followingUsers更改为新数组,则需要手动触发更改检测,以使本示例正常工作。

相关问题