所以我在 39:45 左右關注 Traversy Media 新的 [Angular 速成課程]：https ://www.youtube.com/watch?v= 3dHNOWTI7H8 并不斷收到物件未定義的錯誤。
這是錯誤的圖片，它說物件可能是“未定義”： 物件可能是“未定義”
這在 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>
任務項.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
uj5u.com熱心網友回復：
這是因為您將其設定為可選使用？
您可以洗掉 ? 如果您的專案可以為空，這不是一個好習慣，或者您可以在 html 中執行此操作
<div class="task">
<h3>{{task?.text}}</h3>
<p>{{task?.day}}</p>
</div>
如果變數被初始化，它將顯示該值，并且不拋出錯誤
uj5u.com熱心網友回復：
這里?表示這是一個可為空的物件。
@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>
uj5u.com熱心網友回復：
如果您在task實體化組件時沒有向其中傳遞值，那么它將是未定義的。
如果要在task-item沒有任務輸入的情況下進行實體化，您可以將這樣的內容添加到您的 ngOnInit
const blankTask: Task = {
text: 'placeholder text',
day: 'placeholder day',
};
...
ngOnInit() {
this.task = this.task || blankTask;
}
這意味著您不必總是將任務傳遞給組件。作業堆疊閃電戰
uj5u.com熱心網友回復：
為了解決這個問題，我添加了 *ngIf
<div class="task" *ngIf="task">
<h3>{{task.text}}</h3>
<p>{{task.day}}</p>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445923.html
標籤：javascript 有角度的 打字稿