0

buenos dias/tardes/noches/ madrugadas... tengo un pequeño problema con un tutorial que estaba siguiendo es este:

https://www.youtube.com/watch?v=nAMX042tfhU&t=824s

aproximadamente en el min 8:15 empieza la explicación de que es lo que va ha hacer con el *ngfor y aquí es donde surge mi problema ya que como estoy escribiendo aquí significa que, pues... no resulto del todo, en vs code; el problema inicia cuando el debuger me marca un error:

Property 'title' does not exist on type 'object'.

hasta ahí todo normal. pero no e podido encontrar una solución satisfactoria en la web que me resuleva el problema con el constructor() el código TS es el siguiente:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Registro';
  message = '';
  registered = false;
  nombre:string = "";
  apellido:string = "";
  entrys:object[];


  constructor(){

    this.entrys=[
      {title:"hola1"},
      {title:"hola2"},
      {title:"hola3"},
      {title:"hola4"},
      {title:"hola5"},
      {title:"hola6"},
    ]
  }


  Register()
  {

    this.registered = true;
    
    this.message = "user registered"

  }
}

y el código HTML para que mas o menos se den la idea es este:

<h1>{{title}}</h1>
<form>

  <input type="text" name="nombre" [(ngModel)]= "nombre"><br/>

  <input type="text" name="apellido" [(ngModel)]= "apellido"><br/>

  <input type="submit" name="registrar" (click)="Register()"><br/>


</form>

<br/>

<p *ngIf="registered; else notregistered">{{message}} con el nombre de {{nombre}} {{apellido}}</p>

<ng-template #notregistered>

  <p>nadie registrado</p>

</ng-template>
<br/>
<br/>

<ul>
<li *ngFor='let entry of entrys'>{{entry.title}}</li>
</ul>

el error es el siguiente:

introducir la descripción de la imagen aquí

para concluir y no alargar mas este meollo, ¿aqui que procede?, ¿Qué se esta haciendo mal?.

de antemano gracias por su tiempo en ayudarme.

1
  • *ngFor es para arreglos, y no para objetos, el error mismo te esta diciendo que estas intentando usar el *ngFor en un objeto y no en un arreglo primitivo.
    – Layer
    el 29 sep. 2021 a las 19:20

2 respuestas 2

2

Cuando lo defines como un array de objetos no le decís al compilador que pueden contener esos objetos Al definir una interfaz y asignarle a entrys el tipo Entrys [] el compilador sabe que puede esperar que contenga esa variable por lo cual no dará error al compilar En las nuevas versiones de Angular el modo es estricto no admite tampoco
al tipo entrys:any[]; puede salvarse en el templete con $any pero lo mejor es definir los tipos correctamente da una forma de programar ordenada legible y evita errores de pasar variables undefine o null

operators

https://angular.io/guide/template-typecheck

Me parece adecuado definir una interface

interface Entrys{
    title:string
}


export class AppComponent {

  
  title = 'Registro';
  message = '';
  registered = false;
  nombre:string = "";
  apellido:string = "";

/*
Luego podemos crear una variable asignando la interface como si fuera un tipo
*/
  entrys:Entrys[];


  constructor(){

    this.entrys=[
      {title:"hola1"},
      {title:"hola2"},
      {title:"hola3"},
      {title:"hola4"},
      {title:"hola5"},
      {title:"hola6"},
    ]
  }


  Register()
  {

    this.registered = true;
    
    this.message = "user registered"

  }
}

2
  • ¿Por qué? ¿Qué puedo aprender mirando tu respuesta? Nada, es puro código sin explicación.
    – Candid Moe
    el 3 oct. 2021 a las 6:29
  • agregue explicación en el código
    – nestdan
    el 9 nov. 2021 a las 13:46
1

El problema está en usar object como el tipo de dato para entrys. Al hacer eso se buscará la propiedad title y esa propiedad no existe en object.

Puedes solucionarlo usando any:

entrys:any[];

Si en el video funciona con object puede ser por alguna configuración aplicada al compilador de typescript o por una diferencia entre versiones.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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