Angular中jQuery控制表格增删区域显隐失效问题排查

看起来你遇到的核心问题是jQuery获取不到正确的表格数值，导致显隐逻辑失效，而且在Angular项目里混用jQuery容易出现DOM更新时机的问题，我给你两种解决方案，优先推荐更符合Angular最佳实践的方式：

方案一：用Angular的响应式指令（推荐，完全抛弃jQuery） #

Angular本身提供了强大的视图绑定能力，完全不需要依赖jQuery来控制DOM显隐，这样能避免很多异步更新的问题：

1. 修改HTML模板，用*ngIf指令直接根据tableNumber变量控制区域显隐：

   <div class="container">
     <!-- CREATE TABLES - 只有总数为0时显示 -->
     <div id="CreateTables" class="input-group mb-3" *ngIf="tableNumber === 0">
       <div class="input-group-prepend">
         <span class="input-group-text" id="basic-addon3">Enter the Number of Tables</span>
       </div>
       <form [formGroup]="tableForm" novalidate (ngSubmit)="submitTableNumber()">
         <div class="row">
           <div class="col-lg-5">
             <input type="text" class="form-control" formControlName="counter" id="basic" aria-describedby="basic-addon3">
           </div>
           <div class="col-lg-5">
             <button type="submit" class="btn btn-dark">Save</button>
           </div>
         </div>
       </form>
     </div>
     <!-- INCREASE-DECREASE NUMBER OF TABLES - 总数大于0时显示 -->
     <div id="UpdateTables" class="input-group mb-3" *ngIf="tableNumber > 0">
       <div class="row">
         <div class="col-lg-3">
           <div class="input-group-prepend">
             <span class="input-group-text" >UPDATE THE NUMBER OF TABLES</span>
           </div>
         </div>
       </div>
       <div class="col-lg-9" style="margin-left: 3%;">
         <form [formGroup]="tableForm">
           <div>
             <label>Increase the tables</label><span></span>
             <button type="button" (click)="addTable()" class="btn btn-sm btn-dark">+</button>
           </div>
         </form>
         <form [formGroup]="tableForm">
           <div>
             <label>Decrease the tables</label><span></span>
             <button type="button" (click)="removeTable()" class="btn btn-sm btn-dark">-</button>
           </div>
         </form>
       </div>
     </div>
     <!-- TOTAL TABLE NUMBER - 直接绑定tableNumber变量 -->
     <div class="row">
       <div class="col-lg-6">
         <h5>Total Table Number</h5>
       </div>
       <div class="col-lg-6">
         <h5>{{ tableNumber }}</h5>
       </div>
     </div>
   </div>
   

2. 简化组件代码，去掉所有jQuery相关操作：

   displayTables() {
     this.companyService.getTables().subscribe(data => {
       this.tables = data;
       this.tableNumber = data.length;
       console.log('Total Table Number :' + this.tableNumber);
       // 不需要再手动调用显隐逻辑，Angular会自动更新视图
     });
   }
   

这个方案的优势是：Angular会自动监听tableNumber的变化，实时更新视图，完全避免了DOM操作时机的问题，代码更简洁也更符合Angular的设计理念。

方案二：修复原有的jQuery逻辑（不推荐，但可以解决当前问题） #

如果你一定要保留jQuery，那需要解决DOM更新时机和元素选择的问题：

1. 确保在数据加载完成后调用显隐逻辑：
   把formsVisibility()放在subscribe的回调里，确保DOM已经更新了数值：

   displayTables() {
     this.companyService.getTables().subscribe(data => {
       this.tables = data;
       this.tableNumber = data.length;
       // 注意：你的HTML里#totalTableNumber是div，里面有个h5，直接给div设置text会替换掉h5
       // 建议给h5加个id，比如<h5 id="totalValue"></h5>，然后选择这个元素
       jQuery('#totalValue').text(this.tableNumber);
       console.log('Total Table Number :' + this.tableNumber);
       // 在这里调用显隐逻辑，确保数值已经渲染到DOM
       this.formsVisibility();
     });
   }
   

2. 修正HTML元素选择：
   修改总数显示的HTML，给h5添加id：

   <div id="totalTableNumber" class="col-lg-6">
     <h5 id="totalValue"></h5>
   </div>
   

3. 更新formsVisibility函数，选择正确的元素：

   formsVisibility() {
     const displayedNumber = $('#totalValue').text().trim(); // 加上trim避免空白字符
     console.log('displayed: ' + displayedNumber);
     const num = parseInt(displayedNumber, 10);
     // 处理NaN的情况（比如数值为空时）
     if (!isNaN(num) && num > 0) {
       $('#CreateTables').hide();
       $('#UpdateTables').show();
     } else {
       $('#CreateTables').show();
       $('#UpdateTables').hide();
     }
   }
   

为什么原来的代码不生效？ #

• 你很可能在数据还没加载完成、DOM还没渲染出数值的时候就调用了formsVisibility()，导致获取到空字符串；
• 另外，直接给#totalTableNumber这个div设置text，会替换掉里面的h5标签，可能导致后续选择元素时出现问题。

内容的提问来源于stack exchange，提问作者Mehmet Akif Arslan