突然上手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，层次就很清晰，写代码的思路也不会混乱，表示夸奖！