某工程師的開發日常

隨著Angular 7的到來，最近也將手邊的專案都順利的升級到Angular 7，可說是無痛無雷呀~ 不過還是有些地方是需要注意，就是在Angular 7開始不予許混用Template-Driven Form和Reactive Form，所以像下面這段程式碼是不能被編譯的。 <form [formGroup]="form"> <input formControlName="Email" [(ngModel)]="value"> </form> 實際上這樣的混合的做法很糟也很難維護和測試，只會讓品質變差，所以Angular 7把這個卡掉是很正確的事(拍手)。 題外話，目前大部分的Angular 開發者也幾乎都是以Reactive Form為主來開發表單，最主要的原因是它比Template-Driven Form要來好維護和測試，特別是對於大表單與動態欄位，更是要採用Reactive Form，絕對會省下不少測試維護的時間。 可想而知Angular 7不予許混用Template-Driven Form和Reactive Form這件事，其實影響層面不大。 另外一項值得注意的事，Angular 7加入Budget Bundles的機制。簡單來說，當Bundle Size超過設定的門檻值就會觸發警告和錯誤，所以你會在angular.json看到下面這段設定。 "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] 專案升級至Angular 7的方式: 1. 如果專案還是使用Rxjs 5，請安裝 "npm i -g rxjs-tslint"，並且執行"rxjs-

有時候我們可能會想要將某一個物件的屬性複製到另一個物件，所以我們可能會寫出像下面這樣的程式碼。 let order = { OrderID: 'A001', OrderDate: '2018-10-14' }; let items = [ { ItemName: '橡皮擦', Price: 15, Quantity: 10 }, { ItemName: '鉛筆', Price: 10, Quantity: 10 } ]; order.Items = items; // Output : // { // OrderID: 'A001', // Items: [ // { ItemName: '橡皮擦', Price: 15, Quantity: 10 }, // { ItemName: '鉛筆', Price: 10, Quantity: 10 } // ], // OrderDate: '2018-10-14' // } 如果我們有很多的屬性要做複製的話，向上面這樣的寫法實在太費時。 事實上，我們可以使用Object.assign()來輕鬆地完成這件事，它用於複製一個或多個物件，將它們所有可列舉的屬性到另一個目標物件。 let order = { OrderID: 'A001', OrderDate: '2018-10-14' }; let items = [ { ItemName: '橡皮擦', Price: 15, Quantity: 10 }, { ItemName: '鉛筆', Price: 10, Quantity: 10 } ]; let customer = { CustomerID : 'C001' };