使用 Angular 向具有相同 class 的元素动态添加 div

Question

我需要向所有具有 class .cart-list-item 的元素添加一个包含背景图像的 div 和 class '.cart-list-value .delete-product'。我能够使用 class .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

Answer 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);
}

使用 Angular 向具有相同 class 的元素动态添加 div

Dynamically add a div to elements with the same class using Angular

html

dom

angular

angular-renderer2