Получение ошибки неопределенного объекта в Typescript с использованием Angular
Итак, я слежу за новым [ускоренным курсом Angular] Traversy Media: https://thewikihow.com/video_3dHNOWTI7H8 около 39:45 и постоянно получаю ошибки объекта undefined.
Вот изображение ошибки, в которой говорится, что объект, возможно, «не определен»: объект, возможно, не определен
Это работало в task-item.component.html
<p *ngFor = "let task of tasks">
{{task.text}}
</p>
Возможно, этот объект не определен. task-item.component.html
<div class = "task">
<h3>{{task.text}}</h3>
<p>{{task.day}}</p>
</div>
задача-item.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 {
}
}
Я установил правило tsconfig.json "strictPropertyInitialization": false
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Это потому, что вы установили его как необязательное использование?
Вы можете либо удалить? что не является хорошей практикой, если ваш элемент может быть нулевым, или вы можете просто сделать это в html
<div class = "task">
<h3>{{task?.text}}</h3>
<p>{{task?.day}}</p>
</div>
Он отобразит значение, если переменная инициализирована, и не выдаст ошибку
? здесь указывает, что это объект, допускающий значение NULL.
@Input() task?: Task;
Если вы всегда передаете задачу app-task-item, просто удалите ?
@Input() task: Task;
Или вы можете добавить условное выражение в свой html и удалить ? в своем .ts.
@Input() task: Task;
...
<div class = "task">
<h3>{{task?.text}}</h3>
<p>{{task?.day}}</p>
</div>
Если вы не передаете значение в task при создании экземпляра компонента, то оно будет неопределенным.
Если вы когда-нибудь собираетесь создавать экземпляр task-item без ввода задачи, вы можете добавить что-то подобное в свой ngOnInit.
const blankTask: Task = {
text: 'placeholder text',
day: 'placeholder day',
};
...
ngOnInit() {
this.task = this.task || blankTask;
}
Это означает, что вам не всегда нужно передавать задачу компоненту. Рабочий StackBlitz
Чтобы решить эту проблему, я добавляю *ngIf
<div class = "task" *ngIf = "task">
<h3>{{task.text}}</h3>
<p>{{task.day}}</p>
</div>