2

Tengo este código HTML en angular, que me esta dando problemas con una etiqueta DIV, creo que es una etiqueta de cierre implícito o que no necesita cierre, pero NO la identifico. si ustedes pueden ver algo le agradezco la ayuda.

El código es:

<br><br>
<div class="container py-1">
  <div class="row align-items-center">
    <div class="col-lg-3 text-center col-sm-12">
      <h5>Experiencias Laborales </h5>
    </div>
    <div class="col-lg-9 text-lg-start col-sm-12 text-sm-center">
      <button class="btn" *ngIf="estaLogueado()">
        <img id="iconEditar" src="../../assets/icons-svg/edit.svg" alt="iconsPencel" data-bs-toggle="modal" href="#modalWord" role="button" data-bs-toggle="modal" data-bs-target="#modalWord">
      </button>
      <button class="btn" *ngIf="estaLogueado()">
        <img id="iconEditar" src="../../assets/icons-svg/add.svg" alt="iconsPencel" data-bs-toggle="modal" href="#modalAdd" role="button" data-bs-toggle="modal" data-bs-target="#modalAdd">
      </button>
      <button class="btn" *ngIf="estaLogueado()">
        <img id="iconEditar" src="../../assets/icons-svg/delete.svg" alt="iconsPencel" data-bs-toggle="modal" href="#modalDelete" role="button" data-bs-toggle="modal" data-bs-target="#modalDelete">
      </button>
    </div>
  </div>
</div>


<div class="container">
  <div class="row align-items-center py-3" *ngFor="let word of wordExperience">
    <div class="col-3 text-center">
      <img class="imagenWorkEducation" src="{{word.url_photo_business}}" alt="Imagen-empresa">
    </div>
    <div class="col-8">
      <h5> {{ word.name_business }} </h5>
      <h6> {{ word.job }} </h6>
      <h6> {{ word.duration }} </h6>
      <span> {{ word.chores }} </span>
    </div>
  </div>
</div>

<!-- //////////// modal eliminar //////////////// -->

<div class="modal fade" id="modalDelete" tabindex="-1" aria-labelledby="modalDeleteLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Eliminar Experiencia Laboral</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3 align-items-center" *ngFor="let wordDelete of wordExperience">
            <label for="recipient-name" class="col-form-label">Nombre de la Empresa:</label><br>
            <strong>{{wordDelete.name_business}}</strong><br>
            <label for="recipient-name" class="col-form-label">id: {{wordDelete.id_word}} 
              <button class="btn" *ngIf="estaLogueado()">
                <img id="iconEditar" src="../../assets/icons-svg/delete.svg" alt="iconsPencel"><a href="">Eliminar</a>
              </button><br>
            </label>
            <div class="modal-footer">
            </div>   
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<!-- ////////////modal de agregar experiencia new//////////////// -->

<div class="modal fade" id="modalAdd" tabindex="-1" aria-labelledby="modalAddLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Agregar Experiencia Laboral</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Nombre de la Empresa:</label>
            <input type="text" class="form-control" id="recipient-name" [(ngModel)]="wordAdd.name_business">
          </div>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Cargo:</label>
            <input type="text" class="form-control" id="recipient-name" [(ngModel)]="wordAdd.job">
          </div>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Actividades o Roles:</label>
            <textarea class="form-control" id="message-text"></textarea [(ngModel)]="wordAdd.chores">
          </div>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Duración:</label>
            <input type="text" class="form-control" id="recipient-name" [(ngModel)]="wordAdd.duration">
          </div>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Logo de la Empresa (url):</label>
            <input type="text" class="form-control" id="recipient-name" [(ngModel)]="wordAdd.url_photo_business">
          </div>
          
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" (click)="addDB()">Guardar Cambios</button>
      </div>
    </div>
  </div>
</div>

<!-- /////////////modal editar/////////////// -->

<div class="modal" id="modalWord" aria-hidden="true" aria-labelledby="modalWord" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Editar Experiencia Laboral</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" *ngFor="let wordE of wordExperience">
                   
          <div class="mb-3">
            <h5>Empresa id: {{wordE.id_word}</h5>
          </div>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Nombre de la Empresa:</label>
            <input type="text"  class="form-control" id="recipient-name" [(ngModel)]="wordE.name_business">
          </div>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Cargo:</label>
            <input type="text" class="form-control" id="recipient-name" [(ngModel)]="wordE.job">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Actividades o Roles:</label>
            <textarea class="form-control" id="message-text" [(ngModel)]="wordE.chores"></textarea>
          </div>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Duración:</label>
            <input type="text" class="form-control" id="recipient-name" [(ngModel)]="wordE.duration">
          </div>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Logo de la Empresa -url-:</label>
            <input type="text" class="form-control" id="recipient-name" [(ngModel)]="wordE.url_photo_business">
          </div> 
        
      </div>
      
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary"  data-bs-dismiss="modal" (click)="actualizarDB()">Guardar Cambios</button>
      </div>
    </div>  
  </div>
</div>

Y este es el error que me muestra:

    Error: src/app/work-experience/work-experience.component.html:145:7 - error NG5002: Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

145       </div>
          ~~~~~~

  src/app/work-experience/work-experience.component.ts:11:16
    11   templateUrl: './work-experience.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component WorkExperienceComponent.




× Failed to compile.
6
  • Yo puse tu código en visual studio que marca de inmediato estos errores y solo me aparece que tienes declarado data-bs-toggle="modal" 2 veces en algunos elementos. Para nada con respecto al cierre de div's
    – Yussef
    Commented el 5 ene. 2023 a las 16:11
  • Todos los img deberían ir con cierre en la etiqueta misma <img src="blabla" />, pero dudo que sea ese el problema
    – Alfabravo
    Commented el 5 ene. 2023 a las 16:22
  • Mismo comentario para los input :)
    – Alfabravo
    Commented el 5 ene. 2023 a las 16:33
  • 1
    Es una mala práctica poner más de un id repetido y tú tienes innumerables id="recipient-name". Por cierto, el /div que te indica el error es el que ocupa la línea 8 contando desde el final... Commented el 5 ene. 2023 a las 16:36
  • mmmm también veo que en <h5>Empresa id: {{wordE.id_word}</h5> solo tienes una llave de cierre, aunque creo que no debería afectar, simplemente debería mostrarte la variable como texto.
    – Israel-ICM
    Commented el 5 ene. 2023 a las 16:52

1 respuesta 1

1
</textarea [(ngModel)]="wordAdd.chores">

me parece que ese ngModel no va ahí.

con ctr + f puedes buscar en el código.

3
  • El ngModel iría dentro de las etiquetas, ¿no? :)
    – Alfabravo
    Commented el 5 ene. 2023 a las 16:34
  • 1
    como necesito mínimo 15 caracteres para responderte entonces agrego estas líneas para decirte "SI" Commented el 5 ene. 2023 a las 16:37
  • 1
    Gracias Javier, me sirvio de ayuda, me quito el error del cierre de etiquetas. me salto otro jaja pero es otra cosa. gracias.
    – David Soto
    Commented el 5 ene. 2023 a las 17:26

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.