當(dāng)我使用時?，綁定效果很好。如果刪除它，則它在視圖中不會顯示任何內(nèi)容。<span class="subhead">{{project?.category}}</span>你能告訴我區(qū)別嗎？以這種方式使用它是一種好習(xí)慣嗎？
3 回答
慕勒3428872
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個贊
當(dāng)Angular在project分配值之前渲染視圖時，將導(dǎo)致異常。?.停止評估何時projectis null或undefined，這通常發(fā)生在異步獲取數(shù)據(jù)的情況下，例如從服務(wù)器獲取數(shù)據(jù)可能會花費(fèi)一些時間。
下次更改檢測識別到更改時，將重新評估綁定。當(dāng)project有一個值時，它將綁定project.category。
函數(shù)式編程
TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個贊
這個安全的導(dǎo)航運(yùn)算符可防止在獲取值之前渲染視圖。
我們可以通過以下三種方法來修復(fù)視圖模板中未定義或空值的錯誤。顯然還有其他方法。
方法1：使用安全導(dǎo)航運(yùn)算符
<span class="subhead">{{project?.category}}</span>
方法2：使用異步管道
<span class="subhead">{{(project | async )?.category}}</span>
如果要通過@Input()裝飾器從應(yīng)用程序組件中獲取價值，則可以在應(yīng)用程序組件中簡化這樣的代碼
@Component({
selector: 'my-app',
template: `
<div>
<app-project [project]="project | async"></app-project>
</div>
`,
})
export class App { ... }
您可以在子組件（例如，項(xiàng)目組件）中使用以下模板
<span class="subhead">{{project.category}}</span>
方法3：通過*ngIf結(jié)構(gòu)指令限制視圖
<span class="subhead" *ngIf="project">{{project.category}}</span>
- 3 回答
- 0 關(guān)注
- 557 瀏覽
添加回答
舉報(bào)
0/150
提交
取消