Home / Questions / 507078
Accepted
emgodi
Asked: 2022-06-03 12:41:22 +0800 CST 2022-06-03 12:41:22 +0800 CST

Angular: Problem traversing an object (array) defined in the AppComponent class and with the ngFor directive in html

  • 772

I am newbie to Angular and TypeScript. I am following a tutorial course and I find that the teacher uses in a video an example of initializing an object in a constructor of the AppComponent class to use it later in an example of how to traverse with the *ngFor directive. In his video it works perfectly but I do the same thing and I run into the problem that the "title" property of the "posts" object is not visible in the html code.

This is the error:

Error: src/app/app.component.html:53:53 - error TS2339: Property 'title' does not exist on type 'object'.

53 <li *ngFor="let input of inputs"> {{input.title}}

And this is the snippet of the AppComponent class:

export class AppComponent {
  title:string = 'Calculadora Angular';
  operador1:number=0;
  operador2:number=0;
  resultado:number=0;
  Positivo:boolean=false;
  signo:string="";

  nombre:string="";
  apellido:string="";
  mensaje:string="";
  registrado:boolean=false;

  entradas:object[];

  constructor(){
    this.entradas=[
      {titulo:"Python cada dia mas presente"},
      {titulo:"Java presente desde hace 20 años"},
      {titulo:"JavaScript cada vez mas funcional"},
      {titulo:"Kotlin potencia para tus apps"},
      {titulo:"¿Dónde quedó Pascal?"}
    ];
   ....
  }

And this is the piece of html that uses it:

 <ul>
    <li *ngFor="let entrada of entradas"> {{entrada.titulo}}</li>
  </ul>

What am I doing wrong?

angular

3 Answers

  1. Best Answer

    Instead of using object, you can create an interface

    interface entradas {
    titulo:string
}

    And you call it in your code:

    // Recomiendo que inicializes tu arreglo para no tener que comprobar si el 
// arreglo es nulo. 
entradas:entradas[] = [];

  constructor(){
    this.entradas=[
      {titulo:"Python cada dia mas presente"},
      {titulo:"Java presente desde hace 20 años"},
      {titulo:"JavaScript cada vez mas funcional"},
      {titulo:"Kotlin potencia para tus apps"},
      {titulo:"¿Dónde quedó Pascal?"}
    ];
   ....
    • 1

  2. try to remove the type Object, since TypeScript is taking it as a data type object, just declare it as an empty array or create the interface as the colleague said, since it *ngIfonly works for iterable objects, and an undefined object cannot.

    If the undefined array gives you an error, you can solve it with

    entradas!= []
    • -1

  3. It is solved by replacing the input line in the typescript: object[]; by inputs: any;

    You do that and it works

    • -1