angular 根据条件隐藏组件的干净方法是什么？

Question

美好的一天。我有一个场景，根据条件显示组件，我正在寻找一种清晰的方式和优化的方式来做到这一点。我在下面有一项服务，它将检查 3 个条件，例如用户是否存在于同一个帐户中、用户存在于其他帐户中并且用户不存在于任何帐户中。

如果用户与其他帐户存在，则显示 div 1 并隐藏 div 2 和 div 3。如果用户不存在于任何帐户上，则显示 div 2 并隐藏 div 1 和 div 3。如果用户存在于同一帐户中，则隐藏所有 div .

只要调用getStarted函数，总是触发div show的显示和隐藏。有什么想法吗？谢谢。

#假设我有 3 个 div

<div class="1">
</div>


<div class="2">
</div>

<div class="3">
</div>

 getStarted() {
    if (this.userService) {
      this.userService.checkUserEmail(this.accountId,email).subscribe(
        (res: any) => {
          if (res.isSuccess === false) {
            console.log("user already exists on this account")
          } else if (res.isSuccess === true) {
           console.log("user exists on another account")
          } else {
            console.log("User does not exist on any accounts")
          }
        },
        (err: any) => {
           this.notificationService.showError('Something went wrong, Try again later.');
        }
      );
    } else {
      this.notificationService.showError('Something went wrong, Try again later.');
    }
  }

Answer 1

只需在组件 ts 文件中创建一个类似于“userStatus”的属性，然后从 API 响应中为其分配值，如下所示，在 HTML 模板中读取相应的值并使用*ngIf 进行比较。这是非常简单的实现版本，您也可以将枚举用于可能的值。 userStatus 属性可以容纳的。但是下面的代码将非常适合您。

userStatus:string;
getStarted() {
    if (this.userService) {
      this.userService.checkUserEmail(this.accountId,email).subscribe(
        (res: any) => {
          if (res.isSuccess === false) {
            userStatus = 'USER_EXISTS'
            console.log("user already exists on this account")
          } else if (res.isSuccess === true) {
            userStatus = 'USER_ON_OTHER_ACCOUNT'
           console.log("user exists on another account")
          } else {
            userStatus = 'USER_ON_NO_ACCOUNT'
            console.log("User does not exist on any accounts")
          }
        },
        (err: any) => {
           this.notificationService.showError('Something went wrong, Try again later.');
        }
      );
    } else {
      this.notificationService.showError('Something went wrong, Try again later.');
    }
  }

在html中

<div *ngIf="userStatus == 'USER_EXISTS'"></div>
<div *ngIf="userStatus == 'USER_ON_OTHER_ACCOUNT'"></div>
<div *ngIf="userStatus == 'USER_ON_NO_ACCOUNT'"></div>