问题一:须要进行深拷贝
情景:
this.divisionalWorksTemplateService.getById(id) .subscribe((value) => { this.chooseDivisionalWorksTemplate = value; this.divisionalWorksTemplate = value; })
咱们想要这两个变量初始值雷同,然而后须要进行的操作不同,然而如果咱们这样操作会导致这两个变量其实都指向同一个地址。
也就是说咱们进行如下操作:this.chooseDivisionalWorksTemplate.name = 'test'
就会导致divisionalWorksTemplate.name
也被改为了test。
这时咱们就须要进行深拷贝,之前咱们也有说过能够间接应用lodash来进行深拷贝,如下:
import * as _ from 'lodash'; . . . this.chooseDivisionalWorksTemplate = value; this.divisionalWorksTemplate = _.cloneDeep(this.chooseDivisionalWorksTemplate);
问题二:angular set函数的触发
本周在set函数触发上遇到了问题:
数据筹备:
export interface TestFather{ id: number testSons: TestSon[]}
export interface TestSon{ id: number number: number}
testSon:
@Input() set testFather(testFather: TestFather) { console.log("传入testFather" + testFather.id) } @Input() set testSon(testSon: TestSon) { console.log("传入testSon" + testSon.id) } @Input() set number(number: number){ console.log("传入number" + number) } @Input() set testSons(testSons: TestSon[]) { console.log("传入testSons" + testSons.length) }
testFather:
testFather = { testSons: [ { id: 1, number: 0, } ] as TestSon[] } as TestFather testSon = { number: 0 } as TestSon testSons = [] as TestSon[] constructor() { } ngOnInit(): void { } addNumber(){ this.testSon.number ++ } addTestSon() { this.testFather.testSons.push({ number: 1 } as TestSon) this.testSons.push({ number: Random.nextNumber() } as TestSon) } resetTestSon() { this.testSons = []; }
咱们别离把父对象,子对象,对象数组,number类型数据传给子组件
咱们能够察看当各个参数发生变化时哪些会触发set函数。
首先就是number类型数据
与咱们预期雷同,每当number自增都会触发。
然而当number变动时并没有触发testSon的set函数,同样当testSon变动时也不会触发testFather的set函数。咱们能够得出当组件属性变动时并不会触发set函数。
然而当咱们向数组中推入新对象时也不会触发set函数,查看之前的代码后发现之前推入新对象都是采取赋值的办法,即给了一个新的对象数组,艰深来说只有当对所传入的对象赋予新值的时候才会触发对应的set函数。