0

es primera vez que uso esta pagina y vengo en busca de su ayuda , cada vez que uso un *ngFor en un componente.html (Ionic & Angular) me aparece este error y no se commo mostrar los datos o usar un bucle compatible con un componente, espero puedan ayudarme, de antemano muchas gracias.

ARCHIVO.COMPONENT.TS

import { Component, Input, OnInit } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { GetApiService } from './get-api.service';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-catalogo',
  templateUrl: './catalogo.component.html',
  styleUrls: ['./catalogo.component.scss'],
})
export class CatalogoComponent implements OnInit {

@Input() personajes;

constructor(public _services:GetApiService,private http:HttpClient,
    public navCtrl:NavController) {}

  ngOnInit() {

    this.http.get<any>('https://rickandmortyapi.com/api/character')
    .subscribe(res => {
      this.personajes = res.results;
      console.log('personajes',this.personajes);
    })
 
}

ARCHIVO HTML

 <ion-list *ngFor="let i of personajes">
  <ion-item>
    <ion-label>{{i.name}}</ion-label>
  </ion-item>
</ion-list>

introducir la descripción de la imagen aquí

1 respuesta 1

0

El error te indica que no puedes utilizar la directica *ngFor en el ion-list y se debe a que solo puedes iterar los elementos de esa lista. Para ello debes mover el *ngFor al ion-item.

Ejemplo:

<ion-list>
  <ion-item *ngFor="let i of personajes">
    <ion-label>{{i.name}}</ion-label>
  </ion-item>
</ion-list>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.