Angular 8 - 动态添加按钮。单击事件不起作用答案

【问题标题】：Angular 8 - Dynamically added button.Click event not workingAngular 8 - 动态添加按钮。单击事件不起作用
【发布时间】：2020-03-04 15:48:07
【问题描述】：

我正在尝试通过单击屏幕中的添加按钮添加产品图片并使用删除按钮删除。这些应该在用户单击添加或删除按钮时动态加载。但是当我动态注入 html 并绑定单击事件时，它不起作用。单击它时，函数未调用。我已经简化了下面的代码。 HTML 文件：

<div class="product_images">
          <div class="imageHeading">
                        <p>
                            Images
                        </p>
                    </div>
                    <div class="kt-form__group">
                        <div class="row">
                            <div class="col-lg-2 imageLabel">Main Image</div>
                            <div class="col-lg-3 imageLabel">Choose Image</div>
                            <div class="col-lg-2 imageLabel">Image</div>
                            <div class="col-lg-2 imageLabel">Actions</div>
                        </div>
                    </div>
                    <div class="imagesContainer" [innerHtml]="containerToAdd | sanitizeHtml">
                    </div>
                </div>

Ts 文件

// Angular
import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
// Material
import { SelectionModel } from '@angular/cdk/collections';
import { MatPaginator, MatSort, MatSnackBar, MatDialog, MatRadioButton } from '@angular/material';
import { ProductManagementService } from '../../../../../core/e-commerce/_services/product-management.service';
import { ToastrService } from 'ngx-toastr';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'kt-product-edit',
  templateUrl: './product-edit.component.html',
  styleUrls: ['./product-edit.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ProductEditComponent implements OnInit {

previewUrl : any = "/assets/media/images/noimage.jpg";
containerToAdd : string = "";

constructor(
    private products: ProductManagementService,
    private router: Router,
    private route: ActivatedRoute,
    private toastr: ToastrService,
    private cdr: ChangeDetectorRef,
    private FB: FormBuilder,
    ) {

    }
 ngOnInit() {
    this.addImage();
}
addImage(){
     this.containerToAdd = `
      "<div class="kt-form__group image-container container-1">
          <div class="row">
              <div class="col-lg-2"><input type="checkbox" /></div>
              <div class="col-lg-3"><input type="file" accept="image/*" (change)="imagePreview($event)" /></div>
              <div class="col-lg-2"><img [src]="previewUrl" class="prod_image" /></div>
              <div class="col-lg-2">
                  <span class="deleteElement" (click)="deleteImage()">
                    Del
                  </span>
              </div>
          </div>
      </div>"`;
  }
  deleteImage() {
    console.log("deleteImage");
  }
}

当我使用该单击事件单击该跨度时，deleteImage() 函数不会调用。

【问题讨论】：

将deleteImage移出addImage。
不确定 Angular 但在内联 JS 中，您将函数引用传递给 onlick：<span class="deleteElement" (click)="deleteImage">
@marekful 在angular中使用(click)="someFunction()"是正确的。
@JDunken 仅在 addImage 函数之外
无法通过 innerHTML 使用 JSX 属性，我们将不支持。相反，我建议在您的 render() 函数中使用 if 语句有条件地显示按钮。这样，您可以动态添加和删除按钮，并使用 JSX onClick，并检查所有类型。供参考：github.com/ionic-team/stencil/issues/692

标签： javascript angular typescript dynamic angular8

【解决方案1】：

您正在绑定到 innerHtml，因此您用于绑定的 html 中的任何角度语法都不起作用，因为它不是编译角度模板。所以你的点击绑定是无效的。一个简单的 *ngIf 应该不错。

<div class="product_images">
    <div class="imageHeading">
        <p>
            Images
        </p>
    </div>
    <div class="kt-form__group">
        <div class="row">
            <div class="col-lg-2 imageLabel">Main Image</div>
            <div class="col-lg-3 imageLabel">Choose Image</div>
            <div class="col-lg-2 imageLabel">Image</div>
            <div class="col-lg-2 imageLabel">Actions</div>
        </div>
    </div>
    <div class="imagesContainer" [innerHtml]="containerToAdd | sanitizeHtml">
        <div class="kt-form__group image-container container-1" *ngIf="addImage">
            <div class="row">
                <div class="col-lg-2">
                    <input type="checkbox" />
                </div>
                <div class="col-lg-3">
                    <input type="file" accept="image/*" (change)="imagePreview($event)" />
                </div>
                <div class="col-lg-2"><img [src]="previewUrl" class="prod_image" /></div>
                <div class="col-lg-2">
                    <span class="deleteElement" (click)="deleteImage()">
                    Del
                  </span>
                </div>
            </div>
        </div>
    </div>
</div>

export class MyComponent{
previewUrl : any = "/assets/media/images/noimage.jpg";
public addImage = false

  constructor(
    private products: ProductManagementService,
    private router: Router,
    private route: ActivatedRoute,
    private toastr: ToastrService,
    private cdr: ChangeDetectorRef,
    private FB: FormBuilder) {
  }

  ngOnInit() {
    this.addImage();
  }

  addImage(){
     this.addImage = true;
  }

  deleteImage() {
   this.addImage = false
    console.log("deleteImage");
  }
}

编辑 1：

<div class="product_images">
    <div class="imageHeading">
        <p>
            Images
        </p>
    </div>
    <div class="kt-form__group">
        <div class="row">
            <div class="col-lg-2 imageLabel">Main Image</div>
            <div class="col-lg-3 imageLabel">Choose Image</div>
            <div class="col-lg-2 imageLabel">Image</div>
            <div class="col-lg-2 imageLabel">Actions</div>
        </div>
    </div>
    <div class="imagesContainer">
        <div class="kt-form__group image-container container-1" *ngFor="let image of images; let index = i">
            <div class="row">
                <div class="col-lg-2">
                    <input type="checkbox" />
                </div>
                <div class="col-lg-3">
                    <input type="file" accept="image/*" (change)="imagePreview($event, image)" />
                </div>
                <div class="col-lg-2"><img [src]="previewUrl" class="prod_image" /></div>
                <div class="col-lg-2">
                    <span class="deleteElement" (click)="deleteImage(i)">
                    Del
                  </span>
                </div>
            </div>
        </div>
    </div>
</div>

export class MyComponent{
previewUrl : any = "/assets/media/images/noimage.jpg";
public images = []

  constructor(
    private products: ProductManagementService,
    private router: Router,
    private route: ActivatedRoute,
    private toastr: ToastrService,
    private cdr: ChangeDetectorRef,
    private FB: FormBuilder) {
  }

  ngOnInit() {
    this.addImage();
  }

  addImage(){
     this.images.push({});
  }

  deleteImage(index: number) {
    this.images.splice(index, 1)
    console.log("deleteImage");
  }

  imagePreview($event, image){
    image.path = event.value;
  }
}

【讨论】：

实际上我需要这个动态，因为应该添加多个图像。图像 div 应在单击添加按钮时添加，并通过单击删除按钮删除。
在这种情况下，您需要一个存储数据（图像、标题）的数组。在 html 中，您使用 *ngFor 在内容中显示数组数据。当您单击删除时，从数组中切片，当您添加时只需推送到数组。就是这样
数组的意思是我们应该定义多少，但是这里的图片应该只添加点击添加按钮。
@svkks 您不需要知道数组的确切计数。首先从一个空数组开始，然后在单击“添加”按钮时向其中添加项目。在模板中，只需使用 *ngFor 指令循环数组。不推荐使用 innerHTML 属性，也不是最好的方法。

【解决方案2】：

我认为这会有所帮助，您可以添加一些代码：

html：

<div class="product_images">
  <div class="imageHeading">
    <p>
      Images
    </p>
  </div>
  <div class="kt-form__group">
    <div class="row">
      <div class="col-lg-2 imageLabel">Main Image</div>
      <div class="col-lg-3 imageLabel">Choose Image</div>
      <div class="col-lg-2 imageLabel">Image</div>
      <div class="col-lg-2 imageLabel">Actions</div>
    </div>
  </div>
  <div class="imagesContainer" #elementRef>
  </div>
</div>

ts：

@ViewChild("elementRef", { static: true }) deletableItem: ElementRef<
    HTMLDivElement
  >;
  containerToAdd: any;

  previewUrl: any;

  constructor(private sanitizer: DomSanitizer, private renderer: Renderer2) {}

  ngOnInit() {
    this.addImage();
  }

  ngAfterViewInit() {}

  addImage() {
    let span: HTMLSpanElement = this.renderer.createElement("span");
    this.renderer.addClass(span, "deleteElement");
    this.renderer.listen(span, "click", () => {
      console.log("I am going to delete you");
    });
    span.innerHTML = "Del";

    let divHoldsSpan: HTMLDivElement = this.renderer.createElement("div");
    this.renderer.addClass(divHoldsSpan, "col-lg-2");
    this.renderer.appendChild(divHoldsSpan, span);

    let image: HTMLImageElement = this.renderer.createElement("img");
    this.renderer.addClass(image, "prod_image");
    image.src = this.previewUrl;

    let divHoldsImage: HTMLDivElement = this.renderer.createElement("div");
    this.renderer.addClass(divHoldsImage, "col-lg-2");
    this.renderer.appendChild(divHoldsImage, image);

    let imageInput: HTMLInputElement = this.renderer.createElement("input");
    imageInput.type = "file";
    imageInput.accept = "image/*";
    this.renderer.listen(imageInput, "change", event => {
      // console.log("YOUR FILE,SIR:",e.target.files);

      for (let index = 0; index < event.target.files.length; index++) {
        let reader = new FileReader();
        const fileToUpload = event.target.files[index];
        reader.onload = (e: any) => {
          image.src = e.target.result;
        };
        reader.readAsDataURL(event.target.files[index]);
      }
    });

    let divHoldsImageInput: HTMLDivElement = this.renderer.createElement("div");
    this.renderer.addClass(divHoldsImageInput, "col-lg-3");
    this.renderer.appendChild(divHoldsImageInput, imageInput);

    let checkboxInput: HTMLInputElement = this.renderer.createElement("input");
    checkboxInput.type = "checkbox";

    let divHoldsCheckbox: HTMLDivElement = this.renderer.createElement("div");
    this.renderer.addClass(divHoldsCheckbox, "col-lg-2");
    this.renderer.appendChild(divHoldsCheckbox, checkboxInput);

    let divRow: HTMLDivElement = this.renderer.createElement("div");
    this.renderer.addClass(divRow, "row");
    this.renderer.appendChild(divRow, divHoldsCheckbox);
    this.renderer.appendChild(divRow, divHoldsImageInput);
    this.renderer.appendChild(divRow, divHoldsImage);
    this.renderer.appendChild(divRow, divHoldsSpan);

    let divKtForm = this.renderer.createElement("div");
    this.renderer.addClass(divKtForm, "kt-form__group");
    this.renderer.addClass(divKtForm, "image-container");
    this.renderer.addClass(divKtForm, "container-1");
    this.renderer.appendChild(divKtForm, divRow);

    this.renderer.appendChild(this.deletableItem.nativeElement, divKtForm);
  }

  deleteImage() {
    console.log;
  }

stackblitz

【讨论】：