使用jquery附加功能，但不适用于<ngx dropzone =“”>

Question

我正在使用jquery .append函数，但这不适用于，是否有解决方案

    <ngx-dropzone [showPreviews]="true" #dropzone [showPreviews]="true" [preserveFiles]="false" [accept]="'image/png,image/jpeg'" [label]="'This is a custom label text'"></ngx-dropzone>

    <div id="appendData">
    </div>

    <div (click)="dataload()">Append</div>

    dataload(){
    $('appendData').append(
    `<ngx-dropzone [showPreviews]="true" #dropzone [showPreviews]="true" [preserveFiles]="false" [maxFileSize]="2000" [accept]="'image/png,image/jpeg'" [label]="'This is a custom label text'"></ngx-dropzone>`
    );
    }

Answer 1

您可以使用ngFor动态创建ngx-dropdone

https://stackblitz.com/edit/github-1nbyha?file=src/app/app.component.ts

app.component.ts

export class AppComponent {

  list = [] as any[];

  constructor() { }

  public dataload() {
    this.list.push({
      property1: 123
    });
  }
}

app.component.html

<ngx-dropzone [showPreviews]="true" #dropzone [showPreviews]="true" [preserveFiles]="false" [accept]="'image/png,image/jpeg'" [label]="'This is a custom label text'"></ngx-dropzone>

<div *ngFor="let data of list" >
  <ngx-dropzone [showPreviews]="true" #dropzone [showPreviews]="true" [preserveFiles]="false" [maxFileSize]="2000" [accept]="'image/png,image/jpeg'" [label]="'This is a custom label text'"></ngx-dropzone>

</div>

<div (click)="dataload()">Append</div>