SAP 電商雲 Spartacus UI shipping method radio input 的運作時設計:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5COldzYxMWM2ITY0UDOhRGO2EGZ0UGMkVTYwYmZzgTYy8CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
在 div 裡通過 ngFor 進行循環展開。
生成的原生 html 代碼:
關于 radio input 的測試頁面:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio在原生 HTML 開發裡,我們可以通過給 input 添加 disabled property,來禁掉它。
在 Angular 開發裡,即使我們使用下面的代碼,也不能工作:
應該使用 disabled attribute,而不是 disabled property.
根據這個 StackOverflow 的
讨論,看下面的代碼:
第一組 input 是 enabled 狀态,因為 disabled 屬性為 null. 如果該屬性變為任何其他值,哪怕是字元串 “false”,也會被當成 true 對待,是以第二組會被 disabled.
指導方針:pass null to [attr.disabled] and any non-null value to disable it.
一些測試:
嘗試一下我 buddy Michal 提到的 property binding:
最後的效果:兩個都具有了 disabled 屬性: