Как я могу использовать If coditIon, чтобы не показывать некоторые кнопки некоторым пользователям в Angular?

Question

У меня есть массив block_users, и теперь я не хочу показывать некоторые кнопки, если пользователь находится в Blocked_users. Вот мой angualr.component.html

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

Здесь условие if не работает. Итак, кто-нибудь может сказать, как использовать условие if, если мы не хотим показывать кнопку некоторым заблокированным пользователям. Любые предложения будут оценены.

Answer 1

Я считаю, что вычисленное свойство в классе компонентов поможет.

@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);
   }
}

Answer 2

Вы хотите проверить, находится ли userId где-нибудь в blocked_users.В вашем компоненте должна быть функция, которая проверяет, верно ли это или нет, вместо того, чтобы пытаться сделать это в своем шаблоне.Ваш шаблон должен затем использовать результат этой функции в *ngIf:

Компонент

//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);
}

Вы также можете использовать includes вместо некоторых здесь, но Stackblitzиногда жалуется на includes, и мне нравится сравнивать только идентификатор, поэтому я использовал some

Template

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

Вот Stackblitz для иллюстрации,Надеюсь, это поможет:)

Answer 3

Должно быть как:

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

и в тс:

public isBlockedUser(currentUserId, blockedUserIds): boolean {
    return blockedUserIds.find(id => id == currentUserId) != undefined;
}

Answer 4

вы можете создать функцию в своем компоненте, которая будет проверять, существует ли пользователь в заблокированных пользователях, например:

XYZ.component.html

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

XYZ.component.ts

isUserExists(userId)() {
     let result = this.blocked_users.filter(user => user.id == usersId);
     if(result.length > 0) {
        return true;
     } else {
       return false
     }
}

Answer 5

Вы должны * ngIf над объектом, это должно быть что-то вроде,

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