阅读 253

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

关注下面的标签,发现更多相似文章
评论