Angular10迁移后DataTable下拉框空白、分页值闪显问题排查

迁移至Angular 10版本后，DataTable中每条记录的下拉选择框显示空白而非对应选中值；子组件的foodCategories由父组件传入，此前功能正常，且表单已完成正确初始化。切换分页页面时，选中值会瞬间显示后立即消失，期望下拉框显示从数据库获取的记录对应值。

相关代码 #

template.html #

<table datatable  [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Food Name</th>
      <th>Food Description</th>
      <th>Food Category</th>
    </tr>
  </thead>

  <tbody *ngIf="food?.length != 0" id="thedatatable">
    <tr *ngFor="let food of foodList" id="{{food.Guid}}" class="alternate-row">
      <td><label>{{food.Name}}</label></td>
      <td><label>{{food.Description}}</label></td>
      <td>
        <form class="table_form" [formGroup]="tableForm" (ngSubmit)="onTableFormSubmit(tableForm.value)">
          <select class="form-control" formControlName="foodCategorySelect"
                  (change)="onTableFormSubmit(tableForm.value, food.Guid)">
            <option *ngFor="let foodCategory of foodCategories" [value]="foodCategory.Guid"> {{foodCategory.CategoryName}}</option>
          </select>
        </form>
    </td>
  </tr>
</tbody>

ts文件 #

@Input() foodCategories: any[];
ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
  if (changes.hasOwnProperty('foodCategories') && changes['foodCategories'].hasOwnProperty('currentValue')) {
        this.foodCategories = changes['foodCategories']['currentValue'];
        jQuery('.table').DataTable().ajax.reload();
    }
}

排查到的原因 #

• 全局表单实例复用冲突：所有行的下拉框共用同一个tableForm，DataTable分页重渲染时，Angular无法为每行维护独立的选中状态，临时显示的选中值会被共享表单的默认值覆盖。
• jQuery操作绕过Angular变更检测：直接调用jQuery('.table').DataTable().ajax.reload()刷新表格，会跳过Angular的变更检测流程，导致DOM更新后无法同步表单选中状态。
• 未绑定行数据到下拉框选中值：下拉框仅生成了选项列表，但没有将当前行food的分类ID与下拉框的选中值做绑定，表单初始化时也未针对每行设置对应初始值。

修复方案 #

1. 为每行创建独立表单实例
   放弃全局tableForm，在初始化foodList时为每个food对象生成单独的表单控件，绑定当前行的分类ID作为初始值：

   // 获取foodList后初始化每行表单
   this.foodList.forEach(food => {
     food.categoryForm = new FormGroup({
       foodCategorySelect: new FormControl(food.CategoryGuid) // 绑定当前行的分类ID
     });
   });
   

   模板中修改为绑定当前行的表单：

   <form class="table_form" [formGroup]="food.categoryForm" (ngSubmit)="onTableFormSubmit(food.categoryForm.value, food.Guid)">
     <select class="form-control" formControlName="foodCategorySelect"
             (change)="onTableFormSubmit(food.categoryForm.value, food.Guid)">
       <option *ngFor="let foodCategory of foodCategories" [value]="foodCategory.Guid"> {{foodCategory.CategoryName}}</option>
     </select>
   </form>
   

2. 使用Angular DataTables官方API刷新表格
   避免直接用jQuery操作，改用Angular DataTables提供的dtTrigger触发刷新，确保变更检测正常执行：

   // 组件中引入依赖
   import { DataTableDirective } from 'angular-datatables';
   import { Subject } from 'rxjs';
   
   @ViewChild(DataTableDirective, {static: false})
   dtElement: DataTableDirective;
   dtTrigger: Subject<any> = new Subject();
   
   // 替换ngOnChanges中的刷新逻辑
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.foodCategories) {
       this.foodCategories = changes.foodCategories.currentValue;
       this.rerenderTable();
     }
   }
   
   rerenderTable(): void {
     this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
       dtInstance.destroy();
       this.dtTrigger.next();
     });
   }
   

   模板中添加dtTrigger绑定：

   <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
   

3. 确保选中值类型匹配
   检查food.CategoryGuid与foodCategory.Guid的类型是否一致（比如都是字符串或数字），类型不匹配会导致下拉框无法识别选中值。

内容的提问来源于stack exchange，提问作者0x11111