3

Tengo un problema con un tutorial en la web que según (y digo según, por que todo va bien hasta este momento) hace funcionar el código de angular con la directiva ngfor; sin embargo cuando yo lo replico parece no funcionar. El código es bastante simple no tiene mucha ciencia, este es:

<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>

Y el archivo .ts es este:

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"
      }
}

Es en el archivo .html donde me marca el error, justo hasta abajo donde esta el {{entry.title}} y el error que me marca Vs code es el siguiente:

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

Aquí cabe preguntarse... ¿qué esta mal?

Ps. el video del que les hablo es este https://www.youtube.com/watch?v=nAMX042tfhU&t=673s muchas gracias de antemano

2
  • 1
    Intenta hacer esto: <ul> <li *ngFor='let entry of entrys'>{{entry?.title}}</li> </ul> Commented el 23 sept. 2021 a las 19:30
  • lo intentare deja checo... y no funciono... y a todo esto para que es el signo de interrogación? Commented el 24 sept. 2021 a las 2:00

1 respuesta 1

2

Creo que el problema por el que te sale[object, object] es por que la variables entrys está declarada como object. Lo probé quitando eso y salio lo que buscas.

Puedes ver el demo en: https://stackblitz.com/edit/angular-ivy-vmxalt?file=src%2Fapp%2Fapp.component.ts

Espero te sirva.

4
  • eso quiere decir que ya cambio o actualizaron la forma de programar el *ngfor ya que en el tutorial el tipo lo hace como en el error que tenia Commented el 27 sept. 2021 a las 16:57
  • todo bien y si elimino el error pero... apareció esto en el debugger error TS7022: 'entrys' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer. Commented el 27 sept. 2021 a las 20:09
  • @ulisesalvarez eso es otro error relacionado a Typescript que en tu caso no se a que se deba, te recomiendo hacer otra pregunta relacionado a ese nuevo error. Si mi solución te sirvió con el error del ngFor te agradecería que votes por ella. Commented el 28 sept. 2021 a las 1:04
  • 1
    pues la verdad si me funciono, literal yo le pongo un 10 de 10 al menos en la eliminación del error en cuanto al otro error pues es cierto ese es de typescript así que por eso no te puse una marca negativa, muchas gracias :) Commented el 28 sept. 2021 a las 4:21

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.