es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo utilizar *ngFor para recorrer 2 columnas en una tabla usando Tailwind Css?

15 Jun, 2023 Programación

Estoy tratando de crear una tabla y llenar los bloques con un ciclo *ngFor en Angular. Este es el código original que solo lo muestra como una lista:

<ul class="m-2 lg:m-8 pl-8">
  <li *ngfor="let c of otherClasses">
    <menu-link [entry]="{
        url: c.external_url,
        site: 'oasis',
        path: ['class', c.slug]
      }">{{ c.title }}</menu-link>
  </li>
  <li>
    <a target="_blank" href="https://expium.com/">Atlassian training, offered by our sister company Expium</a>
  </li>
</ul>

Esta es una solución no muy buena con la que sigo jugando:

<table class="table-fixed w-full">
  <thead>
    <tr>
      <th class="w-1/2">Col 1</th>
      <th class="w-1/2">Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td *ngfor="let c of otherClasses">{{ c.title }}</td>
    </tr>
  </tbody>
</table>

No estoy seguro si estoy completamente fuera de lugar o si solo necesito poner el ciclo en un lugar mejor. Aquí está lo que quiero que la tabla parezca eventualmente.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para crear la tabla deseada utilizando un ciclo *ngFor en Angular, el código puede ser modificado de la siguiente manera:

    <table class="table-fixed w-full">
  <thead>
    <tr>
      <th class="w-1/2">Clase</th>
      <th class="w-1/2">Enlace</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngfor="let c of otherClasses">
      <td>{{ c.title }}</td>
      <td><a href="{{ c.external_url }}">{{ c.external_url }}</a></td>
    </tr>
  </tbody>
</table>

    Esto creará una tabla con dos columnas, una para el nombre de la clase y otra para el enlace. El ciclo *ngFor se aplica al elemento <tr>, lo que crea una nueva fila para cada clase en el arreglo otherClasses. El nombre de la clase se muestra en la primera columna usando {{ c.title }}, mientras que el enlace se muestra en la segunda columna usando una etiqueta <a> con el atributo href establecido en {{ c.external_url }}.

    Este código producirá una tabla que se ve como la imagen en el enlace proporcionado.

Comments are closed.