angular 根据条件隐藏组件的简洁方法是什么？

Question

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

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

divshow的显示和隐藏只要调用getStarted函数就会一直触发。有什么想法吗？谢谢。

#假设我有 3 divs

<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

只需在 componenet 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>

angular 根据条件隐藏组件的简洁方法是什么？

angular what is the clean way to hide components based on condition?

typescript

angular-material

angular