Angular中使用Lodash的方法

之前写了篇文章是关于如何优雅的出来API接口返回给我们的Json数据中值为null的处理办法，感兴趣的可以看 前端优雅处理接口返回的Json值为null的方案（页面绑值时无需写非空校验，基于TypeScript） 这篇文章

其中用到了 lodash 这个开源库。

本篇博客我们来看看如何在Angular中使用Lodash。

首先是添加依赖

npm i lodash --save

或

yarn add lodash

在TypeScript中添加一下类型，这样写代码的时候就会有提示了，而且还能看到源码

npm i --save-dev @types/lodash

或

yarn add @types/lodash --dev

安装完成后package.json如下

下面我们就可以使用Lodash了

注意使用之前需要先import，这里我就起名字叫做Lodash

import * as Lodash from 'lodash';

导包后就可以愉快的使用lodash了,以merge为例

整体代码如下

import {Component, OnInit} from '@angular/core';
/*导包*/
import * as Lodash from 'lodash';


/**
 * @description:Lodash demo
 * @author : XeonYu
 * @date   : 2020/12/5
 * @time   : 18:47
 */

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  /*本地初始化的数据*/
  person:Person=new Person()

  constructor() {
  }

  ngOnInit(): void {
    /*模拟接口返回的数据*/
    let apiValue = {
      "baseInfo": {
        "name":null,
        "age": 27,
        "hobby": [
          "吃",
          "喝",
          "玩",
          "乐"
        ]
      },
      "bankCard": [
        {
          "no": "6228482398431xxxxxx",
          "bankName": "中国农业银行",
          "type": "借记卡"
        },
        {
          "no": "6228482398431xxxxxx",
          "bankName": "中国银行",
          "type": "借记卡"
        },
        {
          "no": "6228482398431xxxxxx",
          "bankName": "中国银行",
          "type": "信用卡"
        }
      ]
    }

    console.log('初始化的数据:',JSON.stringify(this.person))
    console.log('模拟接口返回的数据:',JSON.stringify(apiValue))



    /*合并数据  忽略值为null的字段*/
     Lodash.mergeWith(this.person,apiValue,(localData,apiData)=>
       apiData===null?localData:undefined
    )
    console.log('合并后的数据:',JSON.stringify(this.person))
  }
}
class Person{
    baseInfo:BaseInfo=new BaseInfo()
    bankCard:BankCard[]=[]
}
/*基本信息*/
class BaseInfo{
  name:string=''
  age:number=0
  hobby:string[]=[]
}
/*银行卡*/
class BankCard{
  no:string=''
  bankName:string=''
  type:string=''
}

运行后截图如下：

页面绑值代码如下，可以看到，我们不需要再编写判空的逻辑了，代码看起来也会简洁很多：

<div>姓名:{{person.baseInfo.name}}</div>
<div>年龄:{{person.baseInfo.age}}</div>
<br>
<div *ngFor="let item of person.baseInfo.hobby">
  爱好:{{item}}
</div>
<br>
<div *ngFor="let item of person.bankCard">
 <p>银行:{{item.bankName}}</p>
 <p>卡号:{{item.no}}</p>
 <p>银行卡类型:{{item.type}}</p>
</div>

运行后如下

好了 本篇博客就是这样，希望能帮到你。

---

如果你觉得本文对你有帮助，麻烦动动手指顶一下，可以帮助到更多的开发者，如果文中有什么错误的地方，还望指正，转载请注明转自喻志强的博客 ，谢谢！