Html 如何使用If编码不向某些用户显示某些按钮？

我有一个阻塞用户数组，现在我不想在阻塞用户中显示一些按钮

 <div *ngIf="!(userId in event.blocked_users)">
                  <a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
             </div> 

 *<div *ngIf="!isUserExists(userId)">
     <a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
 </div>* 

加入

---

这里的if条件不起作用。因此，如果我们不想向某些被阻止的用户显示按钮，请告诉我们如何使用if条件。如果您有任何建议，我们将不胜感激。

您应该*ngIf超过一个对象，它应该是这样的

<div *ngIf="!event.blocked_users">
    <a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
</div> 

加入

我认为组件类中的计算属性可以实现这一目的

@Component({
  selector: 'my-app',
  template:`
  <button *ngIf="isUserAllowed">My Button</button>
`
})
export class AppComponent  {
  blockedUsers = [];
  userId = 'someId';

  get isUserAllowed():boolean{
     return !this.blockedUsers.includes(this.userId);
   }
}

@组件({
选择器：“我的应用程序”，
模板：`
我的纽扣
`
})
导出类AppComponent{
blockedUsers=[]；
userId='someId'；
get-isUserAllowed（）：布尔值{
return！this.blockedUsers.includes（this.userId）；
}
}

您可以在组件中创建一个函数，该函数将检查阻塞用户中是否存在这样的用户

XYZ.component.html

 <div *ngIf="!(userId in event.blocked_users)">
                  <a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
             </div> 

 *<div *ngIf="!isUserExists(userId)">
     <a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
 </div>* 

应该是这样的：

<div *ngIf="!isBlockedUser(userId,event.blocked_users)">
    <a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
</div> 

---

您要检查

userId

是否在

已阻止的\u用户中的任何位置。
您应该在组件中有一个函数来检查这是否为真，而不是在模板中尝试这样做。然后，模板需要在
*ngIf
中使用该函数的结果：

组成部分
您也可以在这里使用
包含
而不是一些，但是Stackblitz有时会抱怨
包含
，我喜欢只比较id，所以我使用了
一些

样板

举例说明。希望它有帮助：）
如果您提供.ts文件以查看什么
被阻止的用户
，
用户ID
。。。他们就像。如果不是，我只会问：你的
用户id
是
用户
界面的
id
部分，而你的
被阻止的用户
是
用户
的数组吗？另外，你的组件中的事件对象是什么样的？Yi我的USER ID是Objd，BuffKDD用户是UsSersNo的对象数组，但是在事件BulkKedUsUs中我有Objults。它不工作。你可以在这里看到一个例子：我认为这应该是可接受的答案，因为你只计算一次值。与目前接受的答案不同。是的，我不喜欢吵闹的组件或属性：）唯一的问题是变化检测变得疯狂。如果您在控制台上记录
isBlockedUser
，您可能会看到很多调用。最好使用在
ngOnInit
.ok中计算一次的布尔值，那么您能告诉我怎么做吗？
//Returns true if the user isn't in the blocked list, otherwise false
get isUserAllowed():boolean{
    return !this.event.blocked_users.some(e=>e.id===this.userId);
}

<div *ngIf="isUserAllowed">
  <a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
</div>