忽然上手Angular

我也不知道怎麼就忽然開始了一個用Angular的項目， 好的我學！

基礎教程

基礎的教程是跟着官網走的，把購物車的那個例子走完，就知道基礎的東西應該怎麼寫了，感受這個例子仍是挺充分的，快速上手麼得問題。經過購物車的例子本身瞎總結出來的一些知識點：

• *ngFor
• *ngIf
• Interpolation {{ }}
• Property binding []
• event binding
• router
• Service
  • Import service
  • Inject to constructor
• form

雖然都很零碎，可是對後面基礎概念的理解有很大幫助

上手以後遇到的問題

大概看了一天，而後準備撿卡，到如今作了差很少三張,第一個是拿數據，展現一個複選框，而後提交表單,第二個是把從接口拿回來的數據展現成table,第三個是一個單選輸入而後提交表單

• 第一個的問題不是很大，爲何呢，由於庫裏面已經有別人寫的相似的東西，我抄的嗯哈哈哈哈哈哈

• 可是第二個的table存在一個問題就是須要合併重複的值，由於從後端拿到的數據是相似這種的：

dataList: any[] = [
   {
    fieldName: "abc",
    descriptions: [
      { name: 'name1',value: 'value1'},
      { name: 'name2',value: 'value2'}
      ]
   },
  {
    fieldName: "def",
    descriptions: [
      {name: 'ppp', value: 'eee'},
      {name: 'pdd', value: 'ggg'},
      {name: 'vvv', value: 'sss'}
    ]
   }
  ];
複製代碼

而後我咱們的BA就想一個fieldName佔多個description的行數，因此就要rowspan了，可是在rowspan以前，咱們須要處理數據，處理成table 的dataSource能用的那種，也就是:

dataList: any[] = [
   {fieldName: "abc",descriptions: { name: 'name1',value: 'value1'}},
   {fieldName: "abc",descriptions: { name: 'name2',value: 'value2'}},
 ];
複製代碼

而後再計算每個重複的rowspan的值，而後再添加到table的dataSource裏面

完整示例： Angular show table with rowspan

• 第三個問題呢，看着很簡單,我已開始想着從Material 拿一個例子，而後加到form裏綁定要提交的值就行了，可是我太天真了，Material裏面的radio居然是inline顯示的，可是我不想寫css， 因此就給外面包了一層list，而後再把每個選項都包一層list-item，就行了哈哈哈哈哈哈，不寫css令人開心。 🌰

<mat-list role="list" cols="4" rowHeight="100px" class="radio-list">
    <mat-radio-group formControlName="considerHoliday">
      <mat-list-item role="listitem" *ngFor="let item of radios">
        <mat-radio-button [value]="item.value" color="primary">
          {{ item.description }}
        </mat-radio-button>
      </mat-list-item>
    </mat-radio-group>
  </mat-list>
複製代碼

隨便寫點啥

我必需要誇Angular的文檔，很清晰，不少小的Tips體驗感超級棒，太適合我這種新手上手實踐了，並且那個購物車的demo就很優秀啊，大部分高頻率要用的東西都有實踐，而且一把手教你。

並且感受Angular自己，分離了html，css，js，層次就很清晰，寫代碼的思路也不會混亂，表示誇獎！