Table and Array filtering/pipe - html

Question

i'm trying to pipe the values of my table to show only the things i want, actually with "EMPRESAS", "TIPO USUARIO"; it's working(with some errors but i will study on my own to fix that). But with status i get the return of how many "ATIVOS", and "INATIVOS" i got, but when i trying to list him in the table, in my ATIVOS appear the INATIVO, how to fix that? i thing its something happening because inATIVOS and ATIVOS had commun chars, btw i don't know how to fix that
<div class="row">
<div class="col-md-12">
<app-card cardTitle="Informe os parâmetros da pesquisa">
<form (ngSubmit)="onSubmit(selectVal.value, selectedOption)">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class=" form-label"
style="font-weight: bold;"
>Filtrar pesquisa</label>
<select class="form-control" #selectVal name="filterOption" formControlName="filterOption">
<option value="TODOS">TODOS</option>
<option value="empresa">EMPRESAS</option>
<option value="tipo_usuario">TIPO DO USUÁRIO</option>
<option value="status">STATUS DO USUÁRIO</option>
</select>
</div>
</div>
<div
*ngIf="selectVal.value == 'empresa'"
class="var-select" class="col-md-2">
<div class="form-group">
<div >
<label class="form-label"
style="font-weight: bold">Empresa</label>
<select class="form-control" name="empresa" [(ngModel)]="selectedOption" >
<option *ngFor="let usuario of usuarios | pEmpresa : selectedOption" value={{usuario.empresa}}> {{usuario.empresa}}</option>
</select>
</div>
</div>
</div>
<div
*ngIf="selectVal.value == 'tipo_usuario'"
class="var-select" class="col-md-2">
<div class="form-group">
<div>
<label class="form-label" style="font-weight: bold">Tipos do usuário</label>
<select class="form-control" name="tipo_usuario" [(ngModel)]="selectedOption">
<option *ngFor="let usuario of usuarios | pTipo : selectedOption " value={{usuario.tipo_usuario}}>{{usuario.tipo_usuario}} </option>
</select>
</div>
</div>
</div>
<div
*ngIf="selectVal.value == 'status'"
class="var-select" class="col-md-2">
<div class="form-group">
<div >
<label class="form-label" style="font-weight: bold">Status dos usuários</label>
<select class="form-control" name="status" [(ngModel)]="selectedOption">
<option *ngFor="let usuario of usuarios | pStatus : selectedOption" value={{usuario.status}}>{{usuario.status}}</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-warning pos">CONSULTAR</button>
</div>
</div>
</div>
</form>
</app-card>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-success" (click)="cadastrarNovoUsuario()">Cadastrar Usuario</button>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12" *ngIf="carregar_lista_usuarios">
<app-card cardTitle="Usuários" cardClass="card-datatable" [options]="false">
<div class="table-responsive col-md-12">
<table datatable [dtOptions]="dtResponsiveOptions" class="table table-striped table-bordered table-hover" >
<thead>
<tr>
<th style="visibility: hidden; width: 1%; border-collapse: inherit; border-color: transparent;"></th>
<th>NOME</th>
<!-- <th>UID</th> -->
<th>EMPRESA</th>
<th>E-MAIL</th>
<th>TELEFONE</th>
<th>STATUS</th>
<th>AÇÃO</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let usuario of usuarios | filter : selectedOption">
<div class="imagem text vasco" style="border-radius: 80%; height: 60px; border-color: transparent;" ><img
[src]="usuario.imagem_url == '' || usuario.imagem_url == 'null' ? asset : usuario.imagem_url" class="img-radius align-center" style="width:45px"></div>
<td class="text" style="width: 5%; max-width: 4.8rem;">{{usuario.nome_usuario}}</td>
<!-- <td style="width: 1%;">{{usuario.uid}}</td> -->
<td class="text" style="width: 11%; max-width: 5.7rem">{{usuario.empresa}}</td>
<td class="text" style="width: 10%; max-width: 10.9rem">{{usuario.email}}</td>
<td mask="(00)0 0000 0000" class="text" style="width: 10%; max-width: 4rem">{{usuario.celular}}</td>
<td class="text" style="width: 10%; max-width: 3rem">{{usuario.status}}</td>
<td class="text" style="width: 10%;">
<button type="submit" class="btn btn-success" (click)="editarUsuario(usuario.uid)"><i class="feather icon-edit"></i></button>
<button *ngIf="adm_op" type="submit" class="btn btn-danger" (click)="apagarUsuario(usuario.uid)"><i class="feather icon-x-circle"></i></button></td>
</tr>
</tbody>
</table>
</div>
</app-card>
</div>
</div>
This is the PIPE i'm using in the HTML
Pipe.TS
#Pipe({name: "pStatus"})
export class PipeStatus implements PipeTransform {
transform(usuarios: Array<Usuario>, selectedOption){
let result = []
let obj = {}
let obj2 = 'status'
console.log("SELECIONADO: " , selectedOption)
usuarios.forEach((item, i) => {
obj[item[obj2]] = i;
console.log("value", item.status)
});
for(let key in obj){
let idx = obj[key]
console.log("IDX", idx, "OBJ for", obj, 'KEY', key)
result.push(usuarios[idx])
}
return result
```