Así que estoy siguiendo el nuevo [curso acelerado de Angular] de Traversy Media: https://www.youtube.com/watch?v=3dHNOWTI7H8 alrededor de las 39:45 y obtengo errores de objetos indefinidos constantemente.
Aquí está la imagen del error que dice que el objeto es posiblemente 'indefinido': el objeto es posiblemente 'indefinido'
Esto funcionó en task-item.component.html
<p *ngFor="let task of tasks"> {{task.text}} </p>Este objeto es posiblemente 'indefinido' task-item.component.html
<div class="task"> <h3>{{task.text}}</h3> <p>{{task.day}}</p> </div>tarea-elemento.component.ts
import { Component, OnInit, Input } from '@angular/core'; import {Task} from 'src/Task'; @Component({ selector: 'app-task-item', templateUrl: './task-item.component.html', styleUrls: ['./task-item.component.css'] }) export class TaskItemComponent implements OnInit { @Input() task?: Task; constructor() { } ngOnInit(): void { } }He puesto una regla tsconfig.json "strictPropertyInitialization": false
¿Es porque lo configuró como un uso opcional?
¿Puedes eliminar? lo cual no es una buena práctica si su elemento puede ser nulo, o simplemente puede hacer esto en el html
<div class="task"> <h3>{{task?.text}}</h3> <p>{{task?.day}}</p> </div>Mostrará el valor si la variable se inicializa y no arrojará un error
el ? here indica que se trata de un objeto anulable.
@Input() task?: Task; Si siempre pasa la tarea a app-task-item , simplemente elimine el ?
@Input() task: Task; O puede agregar un condicional en su html y eliminar el ? en tu .ts
@Input() task: Task; ... <div class="task"> <h3>{{task?.text}}</h3> <p>{{task?.day}}</p> </div>Para resolver esto agrego *ngIf
<div class="task" *ngIf="task"> <h3>{{task.text}}</h3> <p>{{task.day}}</p> </div>