Filtering array in Angular it is getting only the last value

I am trying to filter an array which it should works as follow.
I have users and I have pages role.
In the pages role I have the user_id and the role.

I need to check if user_id exist in one page then don’t show it to the users array anymore.
If user_id doesn’t exist then it will be shown at the search array of users.

When I try to console.log the users and the pages.role I am getting like this.
For pages.role

pages {role: "Moderator", userID: "5fbc1bc72ffec245c4bd7725"}
pages {role: "Editor", userID: "5eacb3617977572bb34bfc89"}
pages {role: "Analyst", userID: "602e435fd201a0092d791b36"}

And for the users.

0: {_id: "5eacb3617977572bb34bfc89", firstName: "test", email: "", lastName: "test", password: "$2b$10$UEM0xsB/tJQJ8xQKhuZXDOIZ/K26bSje28zPOvEAjrOWQqciEY7s.", …}
1: {_id: "5fbc1bc72ffec245c4bd7725", firstName: "test", email: "", lastName: "test", password: "$2b$10$iynDhvHHYs4SCFOXwdccBOvYnqUxjS.SihLAF5ugO9gQQbnNESjU.", …}
2: {_id: "602e433bd201a0092d791b05", firstName: "Smart", email: "", lastName: "test", password: "$2b$10$fJ4Uqx0DILQUzrPDKiVpnOYqhdbqEYH1vZVnR5HMNOYO4yyNUWcKa", …}
3: {_id: "602e435fd201a0092d791b36", firstName: "al", email: "", lastName: "al", password: "$2b$10$joZSBS9uwEmCi2L3G2CtZ.JuSIIpBpL/2iPe3LCQ/YpXyVQOL1jpu", …}
4: {_id: "602e4c30e3346466703376ab", firstName: "BL", email: "", lastName: "br", password: "$2b$10$R.s.X1ezymXgH0XVnWfW/etIiRqeHjsl6HfQi00pudvWS6dGxIErG", …}
length: 5

This is my code in TS.

  public page: Page;
  public name;
  public users: User[] = [];
  public searchUsers: User[] = [];
  public search = "";
  public role = new Roles();
  public userID;
  public privacies = [
    { id: Role.Admin, name: "role.admin" },
    { id: Role.Editor, name: "role.editor" },
    { id: Role.Moderator, name: "role.moderator" },
    { id: Role.Advertiser, name: "role.advertiser" },
    { id: Role.Analyst, name: "role.analyst" },

 this.receiver.dataUpdate$.subscribe((success: any) => { = success;
      if ( { =;
      } else { =;

      this.userService.userModel().subscribe(res => {
        this.users = res;
        let id;
 => {
            id = t.userID

          const userFilter = this.users.filter(user => user._id !== id);
//Here it filter only the last value that is added as page role

And this is my code in HTML.

 <input class="form-control-sm col-md-6" [(ngModel)]="search" type="text" placeholder="Type name or email" >
     class="col-md-3 form-control-sm"
       *ngFor="let privacy of privacies"
       {{ | translate}}
   <button class="btn btn-primary col-md-3 btn-sm" (click)="saveUserRole()">Add</button>

     <div *ngIf="search" class="card__search">
          <div *ngFor="let f of (searchUsers | searchUser:search)" class="card__list">
            <div class="d-flex row pr-2 pl-2 align-items-center" (click)="addUser(f)">
              <img  ngx-gravatar [email]="''" fallback="mp" size="35">
            <span class="pr-2 pl-2">
              {{f.firstName}} {{f.lastName}}

Leave a Comment