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

Question

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

Answer 1

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.