1

Estoy intentando crear un collapse div de un ngfor con boostrap collapse y no logro hacer que se me muestren todos los documentos de mi colección. La iteración está dentro de un ngFor y el button que me hace el collapse está fuera del ngFor. "existeSubtareas" es un boolean que le mando su valor true si existe una respuesta truthy de BD y falsy si no existe en BD

Este es el array de objetos que me llega por BD:

[
    {
        "_id": "6172ee268df3d5a15d827313",
        "nombre": "Subtarea 1",
        "descripcion": "Descripcion Subtarea Front",
        "actividad": "6172ee068df3d5a15d8272e4",
        "createdAt": "2021-10-22T17:00:22.637Z",
        "updatedAt": "2021-11-09T16:18:33.943Z",
        "__v": 0,
        "responsable": {
            "_id": "5c7efab2ec50e8eb1a2f3e30",
            "nombre": "MORENO AGUIRRE JORGE LUIS"
        },
        "estado": "FINISHED"
    },
    {
        "_id": "6172ee6d8df3d5a15d827315",
        "nombre": "Subtarea 2",
        "descripcion": "Descripcion Subtarea Front",
        "actividad": "6172ee068df3d5a15d8272e4",
        "createdAt": "2021-10-22T17:01:33.904Z",
        "updatedAt": "2021-10-22T17:01:33.904Z",
        "__v": 0
    }
]

En el front solo se muestra el primer objeto: introducir la descripción de la imagen aquí

Intenté ponerles id's únicos y no creo que esa sea la solución

El código de mi página es (por motivos de dinamismo reduzco mi código):

<html>
<div class="row">
      <div class="col-md-12">
        <button type="button" mat-icon-button matTooltip="Ver subtareas" matTooltipPosition="above"
          data-target="#subtasks" data-toggle="collapse" style="right:4px">
          <span class="material-icons-outlined">splitscreen</span>
          <strong>Ver subtareas</strong>
        </button>
      </div>
    </div>
    <br>
    <div id="subtasks" *ngIf="!existeSubtareas" class="collapse">
      <span><strong>¡No hay ninguna subtarea por mostrar!</strong></span>
    </div>
    <div *ngIf="existeSubtareas" class="subtask_container">
      <div id="subtasks" class="collapse subtarea._id" *ngFor="let subtarea of subtareas; index as i; trackBy: trackByFn">
        <div class="row">
          <div class="col-md-2">
            <label for="form-group__label"><strong>Subtareas: </strong></label>
          </div>
        </div>
        <div class="row">
          <div class="col-md-2">
            <label for="form-group__label">Nombre subtarea: </label>
          </div>
          <div class="col-md-4">
            <input *ngIf="estaEditando" type="text" placeholder="Coloque un nombre" class="input"
              style="border:0px; background-color: transparent; width: 100%;" id="subtask_edit_name"
              [(ngModel)]="subtarea.nombre" name="nombre_subtarea + {{subtarea._id}}">
          </div>
          <div class="col-md-2">
            <label for="form-group__label">Descripción: </label>
          </div>
          <div class="col-md-4">
            <input *ngIf="estaEditando" type="text" placeholder="Coloque una descripcion" class="input"
              style="border:0px; background-color: transparent; width: 100%;" id="subtask_edit_desc"
              [(ngModel)]="subtarea.descripcion" name="descripcion_subtarea + {{subtarea._id}}">
          </div>
        </div>
    </div>
</html>

1 respuesta 1

1

La solución fue poner el id y el class en un div fuera del ngFor.

Supongo que se debe a la renderización y tiempos de ejecución de Angular, si alguien puede proveer una explicación exacta estaría muy agradecido

  <div  id="subtasks" *ngIf="existeSubtareas" class="collapse">
          <div class="subtask_container" *ngFor="let subtarea of subtareas; index as i; trackBy: trackByFn">

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.