Angular可复用多排序表格组件tableOptions动态更新不生效问题咨询

根因分析 #

1. 子组件TableMultiSortComponent仅在ngOnInit初始化阶段执行一次initTableMultiSort()，将传入的tableOptions合并到内部tableConfig并生成table实例，后续tableOptions输入值变更时没有对应的更新逻辑，内部配置不会同步刷新
2. 子组件模板渲染表头时循环的是初始化生成的table.columns静态值，不是实时的tableOptions.columns，输入变更后模板也不会自动重绘
3. 父组件的HTML属性绑定存在语法问题，两个输入属性连写未加空格，可能导致绑定失效：[tableOptions]="tableOptions"[tableData]="data"

解决方案 #

第一步：修改子组件的变更监听逻辑 #

更新table-multi-sort.component.ts中的ngOnChanges方法，监听tableOptions和tableData的变更，触发配置和数据的同步更新：

ngOnChanges(changes: SimpleChanges): void {
  // 监听tableOptions变更，重新初始化表格配置
  if (changes.tableOptions && changes.tableOptions.currentValue) {
    // 清理旧订阅避免内存泄漏
    if (this.table) {
      this.table.nextObservable?.unsubscribe();
      this.table.sortObservable?.unsubscribe();
      this.table.previousObservable?.unsubscribe();
      this.table.sizeObservable?.unsubscribe();
    }
    this.initTableMultiSort();
  }
  // 监听tableData变更，更新表格数据
  if(changes.tableData && changes.tableData.currentValue) {
    if(this.table) {
      this.table.data = changes.tableData.currentValue;
      this.table.dataSource?.data = changes.tableData.currentValue;
    }
  }
}

第二步：修复父组件HTML的语法问题 #

修正属性绑定的空格，同时补传isLoading参数实现加载态正常显示：

<app-table-multi-sort 
  (editRowEvent)="editDeal($event)" 
  (dataServiceEvent)="dataServiceEvent($event)" 
  [tableOptions]="tableOptions" 
  [tableData]="data"
  [isLoading]="isLoading">
</app-table-multi-sort>

第三步（可选优化）：父组件补充配置重置逻辑 #

在_pageEventDealsForApprovalList的接口回调中，先重置为默认表头配置，再根据业务条件替换为自定义配置，避免数据切换时表头配置不回退：

.subscribe((res) => {
  this.table.data = res.items;
  // 先重置为默认配置
  this.tableOptions = {
    columns:[
      {id:'name',name:'Deal Name',subId:'type', subtitle:'Deal Type'},
      {id:'annualRentProposed',name:'Annual Rent (Proposed)', subId: 'annualRentCurrent', subtitle:'Annual Rent (Proposed)'},
      {id:'firmTermRemain',name:'Firm Term Remaining', subId: 'firmTermAdded', subtitle:'(Current)'},
      {id:'maxTerm',name:'Max Available Term'},
      {id:'cash',name:'Cash Contribution'},
    ],
    notifications: [
      {type:'info', message:'This deal was sent to approval and waiting for approval.'},
    ]
  };
  // 符合条件时替换为自定义配置
  if(res.items?.length && res.items[0].dealType === 'Partner Location Submission') {
    this.tableOptions = {
      columns:[
        {id:'name',name:'Deal Name',subId:'type', subtitle:'Deal Type'},
        {id:'wagAnnualRent',name:'WAG Annual Rent (Current)'},
        {id:'wagFirmTermRemaining',name:'WAG Firm Term Remaining (Current)'},
        {id:'partnerTerm',name:'Partner Term'},
        {id:'partnerBaseRent',name:'Partner CAM'},
        {id:'partnerServiceFees',name:'Partner Service Fees and Security Monitorning'},
        {id:'action', name: 'Actions', actions:[
          {icon:'file_copy', name:'Copy', class:'primary-color' , },
          {icon:'delete', name: 'Delete', class:'mat-error ml-7px'},
          {icon:'forward', name: 'For Approval', class:'primary-color'}
        ]}
      ],
      notifications: this.tableOptions.notifications
    }
  }
  this.totalDealsForApproval = res.items.length;  
  this.hasApproval = this.totalDealsForApproval > 0;
})

内容的提问来源于stack exchange，提问作者Amar Allia