时间戳

首页 > 解决方案 > Angular 8 - 动态添加的按钮。单击事件不起作用

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

问题描述

我正在尝试通过单击屏幕中的添加按钮添加产品​​图像并使用删除按钮删除。这些应该在用户单击添加或删除按钮时动态加载。但是当我动态注入 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() 函数未调用。

标签： javascriptangulartypescriptdynamicangular8

解决方案

您正在绑定到 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;
  }
}

推荐阅读