Question

我想追加数据，因为我运行了一个循环，因此无法正常工作，这是我的代码

<div *ngFor="let data of dropzone">
  <form action="/file-upload" class="dropzone" id="my-awesome-dropzone">
  </form>
</div>

<button (click)="Append()">Hello</button>

import { Component } from '@angular/core';

declare var Dropzone: any;
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dropzone1: any;
  dropzone = new Array();
  count = 1;

  constructor() {
    this.dropzone.push({
      value: this.count
    });
  }

  Append(){
    this.count = this.count +1;
    console.log('this.count', this.count);
    this.dropzone.push({
        value: this.count
      });
  }

  hell(){
    console.log('working1');
    Dropzone.autoDiscover = false;
    // var Dropzone = require(‘dropzone’);
    var context = this;

try {

    new Dropzone('#my-awesome-dropzone', { maxFiles:10, addRemoveLinks: 

true, autoProcessQueue: false, init: function() {

        context.dropzone1 = this;

        this.on('addedfile', function(file) {

          console.log('file', file);

          var reader = new FileReader();

          reader.readAsDataURL(file);

          reader.onload = function () {

            // context.model_images.push({
            //   img: reader.result,
            //   name: file.name
            // });

          };

          // console.log(‘in base 64 chk model’, context.model_images);
          // context.model_images.push(file);

          if (!file.type.match(/image.*/)) {
            // this is not an image, so Dropzone doesn’t create a thumbnail.
            // set a default thumbnail:
            // you could of course generate another image yourself here,
            // and set it as a data url.
          }

        });

        this.on('sending', function(file, xhr, formData){
          // formData.append(‘property’, context.property_id);
          // formData.append(‘image’, file);
        });

        this.on('error', function(file, response) {
          // $(file.previewElement).find(‘.dz-error-message’).text(response.file_name);
          // context.error_count++;
          // console.log(response);
        });

        this.on('queuecomplete', function(){
          // $(‘#myloader’).removeClass(‘cssload-container’);
          // $(‘#loader_container’).removeClass(‘floatingBarsG’);
          // $(‘.blockG’).addClass(‘myopc’);
          // if(context.error_count>0){
          //     toastr.error(‘Error uploading images.’);
          // }
          // else{
          //      toastr.success(‘Property added successfully.’);
          //      context.navigate();
          // }
        });

        this.on('removedfile', function(file) {
          console.log('remove file', file);

          // for (var i = 0; i < context.model_images.length; i++) {
          //   if (context.model_images[i].name === file.name)context.model_images.splice(i,1);
          // }
          // console.log(‘after remove file’, context.model_images);
        });

        this.on("processing", function() {
          this.options.autoProcessQueue = false;
        });

        // context.dropzone_1 = this;
      }

    });

  }

  catch(err){
    console.log('err', err);
    console.log('error');
  }

}

  ngOnInit() {
    this.hell();
  }
}

Answer 1

在某个表单控件/组中的表单内部使用{{data.value}}。另外，您的循环会生成具有相同ID的表单（可能是不必要的行为）。这不是您应该如何在Angular中处理表单。阅读documentation。

Answer 2

您的循环运行正常。您在视觉上看不到任何变化的原因是因为from标签本身只是一个包装，没有任何显示。您可以做的是在表单内添加一个输入标签。这样，您将可以看到新表单的追加。

使您的HTML像这样

<div *ngFor="let data of dropzone;let i = index">
  <form action="/file-upload" class="dropzone" id="my-awesome-dropzone{{id}}">
    <input placeholder="I'm input in form {{i+1}}" >
  </form>
</div>

<button (click)="Append()">Hello</button>

您可以看到有效的 stackblitz 演示here

我想附加数据，但无法正常工作

2 个答案: