tab页来回切换时调了接口，但是页面没有更新

tab页来回切换时调了接口，但是页面没有更新

场景

1. 整个页面是父组件，父组件中嵌套tab，两个tab页签控制两个子组件的显示隐藏；
2. tab来回切换时，会重新调接口，更新数据；
3. 测试在更改数据库数据之后，切换tab时发现，重新调的接口中数据是更新的，但是页面却没有更新。手动刷新页面之后，页面山上数据才更新。

定位

1. tab页签的操作在父组件中进行的，定义的一些变量是在在父组件constructor中，对数据进行操作的函数（initData()）在ngOnInit和点击tab页的事件函数中；
2. 当改变数据库数据时，点击tab页，调的接口返回的数据时更改后的，但是页面没有更新，因为点击tab页签，触发的是initData()函数，但是父组件的constructor函数并没有再走一遍，所以来回切换tab页时constructor里定义的变量只有一次初始赋值的情况。

解决

1. 在initData()函数中，将涉及到的变量重新初始化一遍。

constructor() {
  isEditable = false;
}
ngOnInit() {
  super.ngOnInit();
}
initData() {
  // 需要在这重新初始化isEditable !!
  this.isEditable = false;
  ...
  if(xxxx) {
    this.isEditable = true;
  }
}
//点击切换tab页时事件函数
toggleTabPanel() {
  ...
  this.initData();
}