问题一:需要进行深拷贝
情景:
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函数。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。