在角度 4 中基于 *ngIf 调用不同的函数

Question

我是 Angular 4 的新手。我正在尝试使用 Web 服务删除在 DB 中创建的组。如果该组拥有任何用户，那么我必须向用户发出警告消息。如果组是空的，我可以删除它。 对于警告消息，我使用了引导模式并删除了具有 Angular 功能（deleteGroup(group)），它将依次调用 Web 服务来删除组。

根据该组中的用户数，我尝试使用 *ngIf，但失败了。谁能帮我解决一下？

功能流程：

1) Groups are listed in drop-down and the user chooses the one
2)Clicking on delete button, calls the getUsers() funtion to check
the availability of users in that group (group members count is
assidgned to usersCount variable )
3) Based on the usersCount, next step has to be done
   a) usersCount == 0 , => delete the group   
   b) usersCount !=0 , => pop-up warning message

HTML 代码

<button type="button" class="btn btn-primary" 
     (click)="getUsers(optionSelected)" >Delete</button> //getuser function gets  the number of users in that group
     <div *ngIf="usersCount ==0 ">deleteGroup(optionSelected)</div> //usercount -> number of users
</button>

打字稿代码：

getUsers(value): void {
    this.output = [];
    this.textValue.getUsers(value)
        .subscribe(res => {
                this.output = res;
                this.usersCount = this.output.length;
                console.log ("Number of users:", this.usersCount);
         })
}

Answer 1

这通常是个坏主意。

HTML 模板在应用程序生命周期中被解析和检查多次。

如果你写你所做的，你的函数将被调用 2、3、4、5、10 次，并会导致不稳定的行为。

相反，您应该根据要求删除组：如果用户点击，则导航...最好是发布所有代码并解释您的最终目标。完成后，我会修改我的答案。

编辑

根据您的评论，您应该有一个带有删除按钮的下拉菜单，这个按钮应该是这样的：

<button *ngIf="!usercount" (click)="deleteGroup(optionSelected)">Delete group</button>

（根据自己的按钮代码）

现在，用户只需点击这个按钮，就会调用该函数，删除用户组。如果用户计数是虚假的（在您的情况下意味着“等于零”），则不会显示该按钮，这意味着用户无法点击它。