Sacar id de una fila de servicio al pulsar un boton (Angular2).

K

Kmos013 #1 Abr '18

Hola a todos tengo este código:

import { Injectable } from "@angular/core";
import { IControlEstadoMesService } from "./control-estado-mes.interface";
import { MOCK_CONTROLESTADOMES } from "./control-estado-mes.mock";
import { Observable } from "rxjs/Observable";
import { ControlEstadoMes } from "./control-estado-mes.model";
import { of } from "rxjs/observable/of";
import { ControlEstadoMesFormateado } from "./control-estado-mes-formateado.model";
import { MOCK_CONTROLESTADOMESES } from "./control-estados-meses.mock";

@Injectable()
export class ControlEstadoMesServiceMock implements IControlEstadoMesService {
    getControlEstadoMes(value: number): Observable<ControlEstadoMesFormateado[]> {
        let listaControlEstadoMesFormateado : ControlEstadoMesFormateado[] = [];        

        let anyos = MOCK_CONTROLESTADOMES.filter(element => element.anyo == value);
        anyos.forEach(element => {
            let controlEstadoMesFormateado: ControlEstadoMesFormateado = Object.assign(element);
            let nombreMes = MOCK_CONTROLESTADOMESES.find(x => x.id == element.mes);
            controlEstadoMesFormateado.mes = nombreMes.nombre;
            listaControlEstadoMesFormateado.push(controlEstadoMesFormateado);
        });
        return of(listaControlEstadoMesFormateado);
    }
}

Este es el que tiene todo asignado:

import { ControlEstadoMes } from "./control-estado-mes.model";

export const MOCK_CONTROLESTADOMES: ControlEstadoMes[] = [
    { id: 0, mes: 0, anyo: 2017, bloqueado: true },
    { id: 1, mes: 1, anyo: 2017, bloqueado: true },
    { id: 2, mes: 2, anyo: 2017, bloqueado: true },
    { id: 3, mes: 3, anyo: 2017, bloqueado: true },
    { id: 4, mes: 4, anyo: 2017, bloqueado: true },
    { id: 5, mes: 5, anyo: 2017, bloqueado: true },
    { id: 6, mes: 6, anyo: 2017, bloqueado: true },
    { id: 7, mes: 7, anyo: 2017, bloqueado: true },
    { id: 8, mes: 8, anyo: 2017, bloqueado: true },
    { id: 9, mes: 9, anyo: 2017, bloqueado: true },
    { id: 10, mes: 10, anyo: 2017, bloqueado: true },
    { id: 11, mes: 11, anyo: 2017, bloqueado: true },
    { id: 12, mes: 0, anyo: 2018, bloqueado: true },
    { id: 13, mes: 1, anyo: 2018, bloqueado: true },
    { id: 14, mes: 2, anyo: 2018, bloqueado: true },
    { id: 15, mes: 3, anyo: 2018, bloqueado: false },
    { id: 16, mes: 4, anyo: 2018, bloqueado: false },
    { id: 17, mes: 5, anyo: 2018, bloqueado: false },
    { id: 18, mes: 6, anyo: 2018, bloqueado: false },
    { id: 19, mes: 7, anyo: 2018, bloqueado: false },
    { id: 20, mes: 8, anyo: 2018, bloqueado: false },
    { id: 21, mes: 9, anyo: 2018, bloqueado: false },
    { id: 22, mes: 10, anyo: 2018, bloqueado: false },
    { id: 23, mes: 11, anyo: 2018, bloqueado: false }
]

Y este el HTML:

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <h1>Bloquear Mes</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <div class="form-group">
        <select class="form-control" id="anio" (change)="getControlEstadoMes($event.target.value)">
          <option>Selecciona un año:</option>
          <option >{{ anyoAnterior | date:'yyyy'}}</option>
          <option >{{ anyoActual | date:'yyyy'}}</option>
        </select>
      </div>
    </div>
  </div>
  <!-- Grid -->
  <div class="row">
    <div class="col-sm-6">
      <kendo-grid [data]="gridData">
        <kendo-grid-column field="mes" title="Mes" [width]="150">

    </kendo-grid-column>
    <kendo-grid-column field="anyo" title="Año" [width]="150">
      
    </kendo-grid-column>
    <kendo-grid-column field="bloqueado" title="Bloquear" [width]="150">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button type="button" class="btn btn-outline-danger" [disabled]="dataItem.bloqueado">Bloquear</button>
        </ng-template>
    </kendo-grid-column>
  </kendo-grid>
</div>
  </div>
</div>

Lo que necesito es que al pulsar el botón de bloquear, me saque por un console.log el id de esa fila, es decir, si pulso el bloquear de enero de 2018, me tendrá que sacar el id 12, y sinceramente no entiendo como puedo hacerlo, gracias de antemano.

Nedaim #2 Abr '18

<button (click)="printId(dataItem.id)" type="button" class="btn btn-outline-danger" [disabled]="dataItem.bloqueado">Bloquear</button>

Es lo mismo que el [disabled]="dataItem.bloqueado" que has puesto pero en la otra direccion. En angular los corchetes "[]" se usan para inputs y los parentesis "()" para bindear outputs, cuando uses cualquiera de los dos lo que haya despues del "=" es codigo de typescript con lo que las variables no se toman como literales si no que funcionan como variables.

Por cierto (change)="getControlEstadoMes($event.target.value)" esto seguramente lo puedas cambiar por (ngModelChange)="getControlEstadoMes($event)". Echale un ojo al ngModel en general.

1 respuesta

K

Kmos013 #3 Abr '18

#2 al poner esa linea del boton me da este error: ERROR TypeError: _co.printId is not a function y al poner el ngmodel tampoco me saca nada, lo dejo así, pero gracias igualmente!

1 respuesta

Nedaim #4 Abr '18

#3 Lo del ngmodel es para el select de mas arriba. La funcion la tendrias que definir en el controlador correspondiente aunque te deberia valer tambien poner (click)="console.log(dataItem.id"). Lo malo de eso es que imagino que luego querras hacer mas cosas al hacer click y no vas a meter toda la logica en el html.

1 respuesta

K

Kmos013 #5 Abr '18

#4 Lo del select lo se, pero no me saca nada. Y claro, lo suyo sería hacer la lógica en el controlador.

Sacar id de una fila de servicio al pulsar un boton (Angular2).

Usuarios habituales

Tags