Home / Questions / 299354
Accepted
Jhoa Khriz
Asked: 2020-10-09 09:37:37 +0800 CST 2020-10-09 09:37:37 +0800 CST

how do i show only checked records in angular?

  • 772

Good afternoon, can you help me, I only need to show the activated records in angular of one of the tables.

That is to say that it shows me only when they are activated and in the case that they are not, they do not appear, since that field is for a logical elimination of the records.

<div class="container">
<div class="card">
    <div class="card-header">
        <h3>Listar Formulario</h3>
    </div>
    <p-table [columns]="columnas" [value]="formularios" selectionMode="single"
        [(selection)]="formularioSeleccionado" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="15">
        <ng-template pTemplate="caption">
            Lista de formularios
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr class="text-center">
                <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                    {{col.header}}
                    <p-sortIcon [field]="col.field" ariaLabel="Activate to sort"
                        ariaLabelDesc="Activate to sort in descending order"
                        ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="summary" let-rowData>
            <div style="text-align:left">
                <button type="button" pButton icon="fa fa-plus" routerLink="../agregarFormulario"
                    class="btn btn-primary active" style="margin-left: 10px" role="button" routerLinkActive="active"
                    label="Nuevo Formulario"></button>
            </div>
        </ng-template>
    </p-table>
</div>

list of a table

angular

1 Answers

  1. Best Answer

    Since the data coming from the array, which you are displaying in the view with ngFor , comes from the result of a data stream Observable, the simplest thing would be to make use of the filter()RxJs function before subscribing.

    How would the code look?

    this.service.getFormulario().pipe(
        filter(value => value.estado != 'activado')
    ).subscribe(resp => { this.formularios = resp; 
    });

    It is worth clarifying that here I am assuming that the state is of type string, but if you have it as boolean or int it would be to replace it != 'activado'with != 1or similar.

    • 0