ANGULAR - Obtener la posición del elemento fuera del bucle

Iniciado por Elizabeth1999, Agosto 24, 2021, 01:42:55 PM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Agosto 24, 2021, 01:42:55 PM Ultima modificación: Agosto 26, 2021, 12:26:28 PM por AXCESS
Hola, buenos días. quisiera saber cómo puedo obtener el elemento rowIndex fuera del bucle




Código: html5
<form class="forms-custom" novalidate="novalidate" [formGroup]="formstate" (ngSubmit)="onSubmit2(formstate.value)">
        <div class="card shadow mb-4" >
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Listado</h6>
            </div>
            <div class="col-md-12 d-flex flex-row-reverse align-items-baseline mt-3">
                <div class="col-md-1_5">
                    <div class="text-left">
                        <button
                        (click)="valuestateall == 1 || valuestateall == 2 || valuestateall == 3 ? updatestate(item, rowIndex, valuestateall) : false"
                        class="btn btn-primary btn"
                                [disabled]="!(!formstate.valid || !preloaderStatus)">Guardar <i
                                class="fa fa-save"
                                *ngIf="!preloaderStatus"></i>
                            <i *ngIf="preloaderStatus" class="fa fa-cog fa-1x fa-spin"
                               aria-hidden="true"
                            ></i>
                        </button>
                    </div>
                </div>
                <div class="col-md-2 form-group p-2"><!--
                    (click)="valuestateall == 1 || valuestateall == 2 || valuestateall == 3 ? updatestate(item, rowIndex, valuestateall) : false"-->
                    <select formControlName="valuestateall" name="valuestateall" id="valuestateall" class="form-control selectxt">
                        <option value="">- Elegir Estado -</option>
                        <option value="1">Atender</option>
                        <option value="2" >Atendido</option>
                        <option value="3" >Inactivo</option>
                    </select>
                </div>
                <div class="form-check col-md-1_5 p-2 d-flex">
                    <input (change)="isSelected = !isSelected" type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Seleccionar todo</label>
                </div>
            </div>
            <div class="card-body">
                <div class="cargando">
                    <i class="pi pi-spin pi-spinner" style="font-size: 6rem" *ngIf="!data"></i>
                </div>
                <div class="table-responsive">
                    <p-table [value]="data" *ngIf="data">
                        <ng-template pTemplate="header">
                            <tr>
                                <th *ngFor="let item of tableHeader"
                                    (click)="toggle = !toggle;orderItems(item, toggle)">{{item.name}}
                                    <i *ngIf="item.value != orderHeaderTable"
                                    class="p-sortable-column-icon pi pi-fw pi-sort-alt"></i>
                                    <i [ngClass]="{'fas' : true, 'fa-chevron-down': toggle && item.value == orderHeaderTable, 'fa-chevron-up': !toggle && item.value == orderHeaderTable}"
                                    class="fas fa-chevron-down"></i>
                                </th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-item let-rowIndex="rowIndex" let-valuestateall>
                            <tr>
                                <td>{{ (item.vehicle) ? item.vehicle.name : '' }}</td>
                                <td>{{ item.vin }}</td>
                                <td>{{ item.year }}</td>
                                <td>{{ item.names }}</td>
                                <td>{{ item.description }}</td>
                                <td>
                                    <span *ngIf="item.state == 1" class="badge badge-success">Atender</span>
                                    <span *ngIf="item.state == 2" class="badge badge-warning">Atendido</span>
                                    <span *ngIf="item.state == 3" class="badge badge-danger">Inactivo</span>
                                    <div class="form-check float-right">
                                        <!---- [checked]="isSelected"  (change)="onChange(data.inputcheck, $event.target.checked)"
                                        *ngIf="checked ? updatestate(item, rowIndex, valuestateall) : true"-->
                                        <input type="checkbox" ng-true-value="1" ng-false-value="0"
                                        class="form-check-input"  id="check_{{rowIndex}}" name="check_{{rowIndex}}" [checked]="isSelected"
                                        (click)="updatestate(item, rowIndex, 3)">
                                    </div>
                                </td>
                                <td>{{ item.created_at | date:'dd-MM-yyyy': '+0200' : 'es-PE'}}</td>
                                <td class="no-padding">

                                    <button type="button" class="btn  btn-outline-primary btn-btn-edit-delete openModal"
                                            data-toggle="modal" (click)="openModal(item)">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button [disabled]="buttonDelete && itemSelected == rowIndex" id="{{rowIndex}}"
                                            (click)="delete(item, rowIndex)" label="delete" type="button" class="btn btn-danger">
                                        <i *ngIf="!buttonDelete || itemSelected != rowIndex" class="fa fa-trash"
                                            aria-hidden="true"></i> <i *ngIf="buttonDelete && itemSelected == rowIndex"
                                                                        class="fa fa-cog fa-5x fa-spin" aria-hidden="true"
                                                                        style="font-size: 16px;"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr class="text-center" *ngIf="!data?.length > 0">
                                <td colspan="10">No se encontro información...</td>
                            </tr>
                        </ng-template>
                    </p-table>

                    <p-paginator *ngIf="data?.length > 0" styleClass="paginacion" [rows]="limit"
                                [totalRecords]="totalCount" [rowsPerPageOptions]="[10,20,30,50,100]"
                                (onPageChange)="paginate($event)" #pPaginator></p-paginator>
                </div>
            </div>
        </div>
    </form>


Acualmente la función onclick está dentro de cada input check para poder obtener la posición rowIndex y de esta forma obtener el id para el update.
Otro problema que tengo es que dentro de este bucle tampoco puedo obtener el valor del estado del  select.

Código: java
updatestate(item: any, index: number, valuestateall: number){
        console.log('id', item.id);
        console.log("index", index);
        console.log(valuestateall);
        this.confirmationService.confirm({
            message: '¿Deseas actualizar todos los estados?',
            header: 'Cambiar estado',
            icon: 'pi pi-info-circle',
            accept: () => {
                console.log('updatestate', ('idcheck_'+index));
                this.buttonSaveState = true;
                this.itemCheckSelected = index;
                this.service.edit(item).subscribe((res: any) => {
                    if (res.code === 200) {
                        this.messageService.add({
                            severity: CMSConstants.MESSAGE_INFO_TYPE,
                            summary: 'Actualizado',
                            detail: 'Se actualizó!!'
                        });
                        if (this.totalPage - 1 === 0) {
                            this.params._page = this.params._page - 1;
                        }
                        this.getAllData(this.params);
                    } else {
                        console.log('error');
                        this.messageService.add({
                            severity: CMSConstants.MESSAGE_ERROR_TYPE,
                            summary: 'Error',
                            detail: 'No se ha podido actualizar'
                        });
                    }
                    this.resetAll();
                }, error => {
                    console.log('error');
                    this.messageService.add({
                        severity: CMSConstants.MESSAGE_ERROR_TYPE,
                        summary: 'Error',
                        detail: 'No se pudo actualizar'
                    });
                    this.resetAll();
                });
            },
            reject: (type) => {
            }
        });
    }


La funcionalidad sería esta:
1.- Seleccionar todos los elementos
2.- Seleccionar el nuevo estado
3.- Guardar el nuevo estado para todos los elementos seleccionados




Mi duda es cómo obtener el row index fuera del bucle (let-item let-rowIndex="rowIndex") y/o cómo obtener el valor del select (valuestateall)
fuera del bucle, el llamado está dentro del input check dentro del bucle. Le puse por defecto 3, ya que tampoco obtiene el value (<input type="checkbox" ng-true-value="1" ng-false-value="0"  class="form-check-input"  id="check_{{rowIndex}}" name="check_{{rowIndex}}" [checked]="isSelected"
                                        (click)="updatestate(item, rowIndex, 3)">)