1

estoy teniendo problema , estoy abriendo un componente modal el cual estoy repitiendo desde un ngform, y le paso un objeto Empresa para que al abrir el modal me muestre los datos de este, pero este siempre me muestra los datos solamente del primero y no entiendo porque tengo ese comportamiento.

acá un poco de código para entenderlo mejor,

Tengo el componente empresas el cual consta de

empresa typescript

 import { Component, OnInit, OnDestroy } from '@angular/core';
    import { EmpresaService } from 'src/app/services/empresa.service';
    import { Empresa } from 'src/app/models/empresa';
    import { Subscription } from 'rxjs';
    
    
    
    @Component({
      templateUrl: 'empresa.component.html',
    })
    export class EmpresaComponent implements OnInit, OnDestroy {
    
      p = 1;
      searchText = '';
      empresas: Empresa[] = [];
      loader: boolean;
      empSubscription: Subscription;
    
      constructor(private empresaService: EmpresaService) {
    
      }
    
    
    
    
      ngOnInit(): void {
    
        this.getAllcompanies();
    
      }
    
      // Get tha users data from the user service
      getAllcompanies() {
        this.loader = true;
        this.empSubscription = this.empresaService.getCompanies().subscribe((data: any) => {
          this.empresas = data.empresas;
          // tslint:disable-next-line: triple-equals
          this.empresas = this.empresas.filter(empresa => empresa.activo == 1);
        });
      }
    
      ngOnDestroy(): void {
        this.empSubscription.unsubscribe();
      }
    
    }
ý su template empresa.html

    <div class="animated fadeIn">
      <!-- row header -->
      <div class="card bg-light">
        <div class="row mb-4">
          <div class="col-12 mt-3">
            <p class="h2 ml-4 mt-1">Filtrar Contenido</p>
          </div>
          <div class="col-12 d-flex justify-content-between">
            <div class="col-sm-6 col-md-4">
              <div class="active-cyan-3">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text border border-success bg-success"><i class="fa fa-search"></i></span>
                  </div>
                  <input class="form-control border border-success" id="username" name="username" placeholder="Empresa"
                    type="text" [(ngModel)]="searchText">
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-8 d-flex justify-content-end mt-1">
              <app-moda-emp-crear></app-moda-emp-crear>
            </div>
          </div>
        </div>
      </div>
      <!-- row header -->
    



  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header">
          <i class="fa fa-building"></i> Listado de Empresas
        </div>
        <div class="card-body">
          <div class="table-responsive-sm">
          <table class="table">
            <thead>
              <tr>
                <th>Empresa</th>
                <th>Direccion</th>
                <!-- <th>NRC</th> -->
                <!-- <th>NIT</th> -->
                <th>Giro</th>
                <th>Direccion</th>
                <th>Telefono</th>
                <th>Estado</th>
                <th>Acciones</th>                
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let empresa of empresas  |filter:searchText |paginate: {itemsPerPage:8, currentPage:p}; index as i">
                <td>{{empresa.nombre}}</td>
                <td>{{empresa.direccion}}</td>
                <!-- <td>{{empresa.registroFiscal}}</td> -->
                <!-- <td>{{empresa.nit}}</td> -->
                <td>{{empresa.giro}}</td>
                <td>{{empresa.direccion}}</td>
                <td>{{empresa.telefono}}</td>

                <td *ngIf="empresa.activo == 1">
                  Activo
                </td>
                <td *ngIf="empresa.activo== 0">
                  Inactivo
                </td>

                <td class="d-flex justify-content-between">
                  <app-modal-emp-detail [id]="empresa.id" *ngIf="empresa.activo == 1"></app-modal-emp-detail>
                  <app-modal-edit-emp [id]="empresa.id" *ngIf="empresa.activo == 1"></app-modal-edit-emp>
                  <app-confirm-modal></app-confirm-modal>
                </td>                
              </tr>
            </tbody>
          </table>
        </div>
          <div class="row justify-content-center">
            <pagination-controls (pageChange)="p = $event" (pageBoundsCorrection)="p = $event" previousLabel="Anterior"
              nextLabel="Siguiente">
            </pagination-controls>
          </div>

        </div>
      </div>
    </div>
    <!-- Fin table de Cuentas-->
  </div>
</div>

Esto se ve así imagen de muestra

Ahora al dar clic al botón del el ojo o del lápiz abre un modal que debería mostrar la data correspondiente al row, para esto esto utilizando @output, pero el problema es que realmente solo muestra los datos repetidos del primer row.

introducir la descripción de la imagen aquí

y bien para este he creado un componente modal.

<!-- Button trigger modal -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#editPatient">
    <i class="fa  fa-eye"></i>
</button>

<!-- Modal -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"
    id="editPatient">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title">Informacion Empresa</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- inicio formulario -->
            <div class="modal-body">
                <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">

                    <!-- Empresa Nombre -->
                    <div class="form-group row mx-1">
                        <label class="col-md-3 col-form-label" for="text-input">Empresa</label>
                        <div class="col-md-9">
                            <input type="text" name="nombre" class="form-control" disabled [value]="empresa.nombre">
                        </div>
                    </div>
                    <!-- Empresa Nombre -->


                    <!-- Direccion -->
                    <div class="form-group row mx-1">
                        <label class="col-md-3 col-form-label" for="text-input">Direccion</label>
                        <div class="col-md-9">
                            <input type="text" name="nombre" class="form-control" disabled [value]="empresa.direccion">
                        </div>
                    </div>
                    <!-- Direccion -->


                    <!-- Registro Fiscal -->
                    <div class="form-group row mx-1">
                        <label class="col-md-3 col-form-label" for="text-input">RF</label>
                        <div class="col-md-9">
                            <input type="text" name="nombre" class="form-control" disabled
                                [value]="empresa.registroFiscal">
                        </div>
                    </div>
                    <!-- Registro Fiscal -->

                    <!-- Telefono -->
                    <div class="form-group row mx-1">
                        <label class="col-md-3 col-form-label" for="text-input">Telefono</label>
                        <div class="col-md-9">
                            <input type="text" name="nombre" class="form-control" disabled [value]="empresa.telefono">
                        </div>
                    </div>
                    <!-- Telefono -->

                    <!-- Email -->
                    <div class="form-group row mx-1">
                        <label class="col-md-3 col-form-label" for="text-input">Email</label>
                        <div class="col-md-9">
                            <input type="text" name="nombre" class="form-control" disabled [value]="empresa.email">
                        </div>
                    </div>
                    <!-- NEmail-->

                    <!-- NIT -->
                    <div class="form-group row mx-1">
                        <label class="col-md-3 col-form-label" for="text-input">NIT</label>
                        <div class="col-md-9">
                            <input type="text" name="nombre" class="form-control" disabled [value]="empresa.nit">
                        </div>
                    </div>
                    <!-- NIT -->

                    <!-- Razon -->
                    <div class="form-group row mx-1">
                        <label class="col-md-3 col-form-label" for="text-input">Razon Social</label>
                        <div class="col-md-9">
                            <input type="text" name="nombre" class="form-control" disabled
                                [value]="empresa.razonSocial">
                        </div>
                    </div>
                    <!-- NRazon-->

                    <!-- Razon -->
                    <div class="form-group row mx-1">
                        <label class="col-md-3 col-form-label" for="text-input">Giro</label>
                        <div class="col-md-9">
                            <input type="text" name="nombre" class="form-control" disabled [value]="empresa.giro">
                        </div>
                    </div>
                    <!-- NRazon-->

                    <div class="modal-footer">
                        <button type="button" class="btn btn btn-primary" data-dismiss="modal">Aceptar</button>                        
                      </div>
                </form>

            </div>
            <!-- fin formulario  -->
        </div>
    </div>
</div>

y su archivo ts

import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { EmpresaService } from 'src/app/services/empresa.service';
import { Empresa } from 'src/app/models/empresa';
import { Subscription } from 'rxjs';
@Component({
  selector: 'app-modal-emp-detail',
  templateUrl: './modal-emp-detail.component.html',
  styles: [
  ]
})
export class ModalEmpDetailComponent implements OnInit, OnDestroy {

  empresa: Empresa;
  @Input() id: string;
  empSubscription: Subscription;
  constructor(private empresaService: EmpresaService) { }

  ngOnInit(): void {
    this.empresa = new Empresa();
    this.getEmpresa();
  }

  getEmpresa(): void {
    this.empSubscription = this.empresaService.getOneCompany(this.id).subscribe((data: any) => {
      this.empresa = data.empresa;
    });
  }

  ngOnDestroy(): void {
    this.empSubscription.unsubscribe();
  }    
}

y este es el servicio donde ambos obtienen la data

 import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Empresa } from '../models/empresa';
import { global } from './global';


@Injectable({
  providedIn: 'root'
})

export class EmpresaService {

  MAIN_URL = global.url;
  userToken: string;

  constructor(private http: HttpClient) {
    this.readToken();
  }

  getCompanies() {
    // tslint:disable-next-line: max-line-length
    const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded').set('Authorization', JSON.parse(this.userToken));
    return this.http.get(this.MAIN_URL + 'empresas', { headers });
  }


  getOneCompany(id: string) {
    // tslint:disable-next-line: max-line-length
    const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded').set('Authorization', JSON.parse(this.userToken));
    return this.http.get(this.MAIN_URL + 'empresa/' + id, { headers });
  }


  editCompany(empresa: Empresa) {
    const json = JSON.stringify(empresa);
    const params = 'json=' + json;
    const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
      .set('Authorization', JSON.parse(this.userToken));
    return this.http.put(this.MAIN_URL + 'empresa/actualizar', params, { headers });
  }

  /*
  Crear una  Empresa
  */

 createCompany(empresa: Empresa) {
  const json = JSON.stringify(empresa);
  const params = 'json=' + json;
  const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
    .set('Authorization', JSON.parse(this.userToken));
  return this.http.post(this.MAIN_URL + 'empresa/crear', params, { headers });
}

  // createCompany(empresa: Empresa) {
  //   const datos = {
  //     nombre: empresa.nombre,
  //     direccion: empresa.direccion,
  //     registroFiscal: empresa.registroFiscal,
  //     telefono: empresa.telefono,
  //     tamanoEmpresa_id: empresa.tamanoEmpresa_id,
  //     nit: empresa.nit,
  //     logo: empresa.logo,
  //     razonSocial: empresa.razonSocial,
  //     giro: empresa.giro,
  //     email: empresa.email,
  //     activo: empresa.activo
  //   };
  //   const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
  //     .set('Authorization', JSON.parse(this.userToken));
  //   console.log('Servicio crear empresa corriendo');
  //   console.log('datos', JSON.stringify(datos));
  //   return this.http.post(this.MAIN_URL + 'empresa/crear', { json: datos }, { headers });
  // }


  /****************
  **Read the token
  *****************/
  readToken() {
    if (localStorage.getItem('token')) {
      this.userToken = localStorage.getItem('token');
    } else {
      this.userToken = '';
    }
    return this.userToken;
  }
}

1 respuesta 1

1

Estas creando un modal propio para cada empresa pero con el mismo id para todos

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" id="editPatient">

Lo que se debería hacer es crear un id único, para ello puedes aprovechar el id de la empresa y en el componente modal hacer algo así:

<button type="button" class="btn btn-outline-primary" data-toggle="modal" [attr.data-target]="'#editPatient-' + id">
<i class="fa  fa-eye"></i>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" id="editPatient-{{id}}">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.