從今天開始將自己在專案或者學習過程中遇到的問題及解決辦法寫成部落格，積累經驗並記錄自己的成長。

問題：angular這個框架採用mvc思想，檢視與邏輯是分離的，也就是html檔案負責頁面輸出，ts檔案負責業務邏輯處理，各司其職，那麼問題來了，如何在ts檔案中獲取到使用者在html頁面中輸入的值？直白點就是使用者在輸入框中輸入“sinclar”，那在ts檔案中要怎麼樣才能獲取到，就是這個問題。下面是我的解決辦法：

        解決：

        1.首先要新建一個model檔案：

           export class Barcode{
                      public id: number;
                      public name: string;
                      public power: string;
            }

         這個檔案的意義就是一個橋樑的作用，連線檢視層與邏輯層，在angular1中承擔這個角色的就是鼎鼎大名的$scope，不過從angular2開始就放棄這個屬性了，這麼說有點抽象，就是可以在ts檔案中new一個Human物件，然後在前端頁面是用ngModel將其繫結，這樣就實現了雙向繫結。這樣說好像還很模糊，等看完整篇文章再自己對比程式碼就會清晰很多了，不過是自己的講解，自己理解能力也是有限。

          2.   1）在ts檔案中引入model：import { Barcode}    from '../Model/barcode';

                2）建立一個model物件：   private model = new Barcode

                3）現在可以隨便使用model物件的屬性，比如model.power，而且在這裡我們操作的model.power會實時更新到模版中，比如model.power = “sinclar”；這是模版使用ngModel繫結資料的輸入框就會更新為sinclar，這涉及到angular框架的一個特點，叫雙向資料繫結。

          3.現在就看前端模版要怎麼寫了，程式碼如下：

                             <form #form="ngForm" (ngSubmit)="onSubmit(form.value)" >

                                      <div class="form-group">
                                              <label for="barcode">SSCC barcode</label>
                                                        <input type="text" class="form-control" id="barcode"   required
                                                                             [(ngModel)]=" Barcode.barcode" name="barcode"    #barcode="ngModel">
                 
                                        </div>

                              </form>

               這裡使用了form表單提交，先不關注這個，有興趣可以看著這個地址https://www.w3cschool.cn/vntgu/vntgu-u7by25w6.html 可以看到有個[(ngModel)]這就是雙向資料繫結的寫法，[]實現了資料流從元件到模板，()實現了資料流從模板到元件，兩者一結合[()]就實現了雙向繫結。 至於#barcode="ngModel"這行程式碼我不太清楚什麼作用，刪掉好像沒什麼影響。