none
Coloque datos en una cuadrícula de 2 filas y 3 columnas usando Angular 14 RRS feed

  • Pregunta

  • Hola, estoy usando Angular 14, Bootstrap 5 y el nodo js 16. Tengo datos de un servicio, quiero poner esos 6 registros en 2 filas y 3 columnas... Probé con una tubería, pero la información está entrando solo una columna y 6 filas.

    html

    <div *ngIf="items">    
        <table class="table ">        
            <tbody>
                <tr *ngFor="let item of items">              
                    <td>
                    <div class="d-flex flex-row ">
                        <div class="p-2 "><img src=".\assets\youtube.png" height="130px" width="130px"></div>
                        <div class="d-flex flex-column">
                            <div class="p-2 "><img src=".\assets\youtube.png" height="30px" width="30px"></div>
                            <div class="p-2 ">{{ item.artist.artistName }}</div>
                            <div class="p-2 ">{{ item.songName }}</div>
                            <div class="p-2 ">{{ item.artist.artistName }} - {{ item.songlikes }} - {{ item.songRegistryDate }}</div>
                          </div>    
                      </div>
                    </td>
                </tr>      
            </tbody>
        </table>
        <br><br>      
    </div>



    ts

     items!: any[];

     constructor(private artistService: ArtistServiceService) { }

      ngOnInit(): void {
        console.log('ingresando a ngOnInit');
        this.artistService.Get6RandomSongs().then((response: any) => {
          console.log('response', response);
          this.items = response;
        })
        .catch((error: any) => {
          console.error(': ', error);
        })     
       
      }

    keys-pipe.ts

    import { PipeTransform, Pipe } from '@angular/core';

    @Pipe({ name: 'keys' })
    export class KeysPipe implements PipeTransform {
        transform(value: any, args: string[]): any {
            let keys = [];
            for (let key in value) {
                keys.push({ key: key, value: value[key] });
            }
            return keys;
        }
    }

    Datos del servicio



    Error

    artist-service.service.ts:20 ERROR TypeError: Cannot read properties of undefined (reading artistName')

    Hay alguna forma? o tal vez con otro método...

    Tambien intenté asi:

    <div class="container">
        <div class="row">
          <div class="col-md-6" *ngFor="let item of items">

            <div class="card">
                <div class="card-header">
                  item.songName
                </div>
                <div class="card-body">
                 item.artist.artistName
                </div>
              </div>
              
          </div>
        </div>
      </div>

    Pero no hay datos.... por ejemplo al primera posición muestra:

    item.songName







    • Editado Jhon2905 martes, 1 de noviembre de 2022 11:55
    martes, 1 de noviembre de 2022 11:22

Todas las respuestas

  • Hola Jhon2905,

     

    Gracias por levantar tu consulta en los foros de MSDN. Con respecto a la misma, te comparto la siguiente información respecto a cuadrículas: Cuadriculas

     

    Gracias por usar los foros de MSDN.

     

    Benjamin G.

    ____________________________

     

    Recuerde "Marcar como respuestas" las respuestas que resolvieron su problema, es una forma común de reconocer a quienes ayudaron y hace que sea más fácil para otros visitantes encontrar la solución más adelante.

    martes, 24 de enero de 2023 16:37
    Moderador