使用 Angular 将 div 动态添加到具有相同类的元素答案

【问题标题】：Dynamically add a div to elements with the same class using Angular使用 Angular 将 div 动态添加到具有相同类的元素
【发布时间】：2021-01-03 19:45:34
【问题描述】：

我需要向所有具有类.cart-list-item 的元素添加一个包含背景图像的类'.cart-list-value .delete-product' 的div。我能够获取类 .carl-list-item 的所有元素，但是当我添加新元素时，它只是添加到最后一个元素中。

export class ShopViewCartViewComponent implements OnInit {
  constructor(
    private renderer: Renderer2,
    private elem: ElementRef,
    protected cartService: CartService  <BaseCartItem>
  ) {}

  ngOnInit(): void {}

  ngAfterViewInit() {
    const child = document.createElement("div");
    child.addEventListener('click', this.onClick.bind(this));
    child.classList.add('cart-list-value', 'delete-product');
    
    const elements = this.elem.nativeElement.querySelectorAll('.cart-list-item');
    elements.forEach(element => {
      this.renderer.insertBefore(element, child, element.childNodes[0]);
    });
    console.log(elements);
  }

    onClick(event) {
    console.log(event);
  }
}``` 

[here you can see what is the result][1]


  [1]: https://i.stack.imgur.com/obrdM.png

【问题讨论】：

标签： html angular dom angular-renderer2

【解决方案1】：

您正在创建一个元素 (const child = document.createElement("div"))，然后将相同的 reference 传递给所有容器元素 (.cart-list-item)。

因此，它首先移动到第一个元素，然后随着循环的进行，您将 相同的元素 (const child...) 移动到下一个容器。

因此，只需在循环内创建该子元素，您将为每个容器创建一个新元素。像这样：

ngAfterViewInit() {
      
  const elements = this.elem.nativeElement.querySelectorAll('.cart-list-item');

  elements.forEach(element => {
    let child = document.createElement("div");
    child.addEventListener('click', this.onClick.bind(this));
    child.classList.add('cart-list-value', 'delete-product');

    this.renderer.insertBefore(element, child, element.childNodes[0]);
  });

  console.log(elements);
}

【讨论】：