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.
data-bs-toggle="modal"
2 veces en algunos elementos. Para nada con respecto al cierre de div'simg
deberían ir con cierre en la etiqueta misma<img src="blabla" />
, pero dudo que sea ese el problemainput
:)id
repetido y tú tienes innumerablesid="recipient-name"
. Por cierto, el/div
que te indica el error es el que ocupa la línea 8 contando desde el final...<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.