在Angular中使用jQuery向*ngIf隐藏元素追加div失败的解决方案

这个问题我之前也碰到过，核心原因是Angular的变更检测时机和DOM渲染的顺序问题：当你设置this.show=true后，Angular并不会立刻把.solution元素渲染到DOM里，此时用jQuery去选择这个元素自然找不到，追加操作也就无效了。

下面给你两种解决思路，优先推荐第一种符合Angular设计理念的方法：

方法一：用Angular数据驱动的方式（推荐） #

Angular是数据驱动框架，尽量避免直接操作DOM，我们可以通过控制数据让模板自动渲染内容：

组件类代码： #

show = false;
// 用数组存储需要追加的内容数据
detailList: Array<{ text: string }> = [];

handleClick() {
  this.show = true;
  // 往数组里添加新的内容数据
  this.detailList.push({ text: 'Text' });
}

模板代码： #

<button (click)="handleClick()">显示并添加内容</button>
<div class="col-md-4 solution" *ngIf="show">
  <!-- 用*ngFor循环渲染数组里的内容 -->
  <div class="class-1" *ngFor="let detail of detailList">
    <p>{{ detail.text }}</p>
  </div>
</div>

这种方式完全不需要手动操作DOM，由Angular帮你管理渲染，维护起来更方便，也不容易出现DOM相关的bug。

方法二：等待DOM渲染完成后再用jQuery操作（不推荐，但适合临时场景） #

如果你一定要用jQuery操作DOM，需要确保.solution元素已经被Angular渲染到DOM中后再执行追加操作，可以通过两种方式实现：

方式1：用setTimeout延迟执行 #

利用setTimeout让代码放到下一个事件循环执行，此时Angular已经完成了DOM渲染：

handleClick() {
  this.show = true;
  // 延迟0秒，让Angular先完成DOM渲染
  setTimeout(() => {
    const area = $(".solution");
    const detail = `<div class="class-1"> <p>Text</p> </div>`;
    area.append(detail);
  }, 0);
}

方式2：手动触发变更检测 #

通过ChangeDetectorRef手动触发Angular的变更检测，强制DOM先渲染出来：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  show = false;

  constructor(private cdr: ChangeDetectorRef) {}

  handleClick() {
    this.show = true;
    // 手动触发变更检测，让Angular立刻渲染DOM
    this.cdr.detectChanges();
    const area = $(".solution");
    const detail = `<div class="class-1"> <p>Text</p> </div>`;
    area.append(detail);
  }
}

最后还是建议尽量用方法一，符合Angular的设计模式，避免直接操作DOM带来的潜在问题。

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