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