Arrays 如何使用formBuilder为angular2中的新嵌套JSON数据插入新图像？

我尝试使用formBuilder创建一个JSON数据，其中包含图像，以保存到firebase数据库中，但首先我需要在主JSON数据中创建嵌套的数组数据，该数据包含每个数组的图像，我需要每个数组数据插入新图像

包含嵌套格式数组的我的JSON数据：

{
  "nomor_transaksi": "",
  "returDetails": [
    {
      "kd_brg": "",
      "qty": "",
      "pengaduan": "",
      "kd_lokasi": "",
      "picture": ""
    },
    {
      "kd_brg": "",
      "qty": "",
      "pengaduan": "",
      "kd_lokasi": "",
      "picture": ""
    }
  ]
}

以下是我的html代码：

<form [formGroup]="datareturForm" (ngSubmit)="submitForm()">

      <div class="form-group">
        <label for="nomor_transaksi">Nomor Transaksi</label>
        <input #notrans type="text" placeholder="nomor transaksi" formControlName="nomor_transaksi"/>
        <p *ngIf="datareturForm.controls.nomor_transaksi.errors">Pelan2 bro, max 10 char ya</p>
      </div><br/>

      <!-- details mulai disini-->

      <div class="form-group">
        <div formArrayName="returDetails">
          <p>List Barang : </p>
          <div *ngFor="let retur of returDetails.controls; let i=index" [formGroupName]="i">
            <label for="kd_brg">Kode Barang</label>
            <input type="text" placeholder="Kode Barang" formControlName="kd_brg"/>
            <!--<p *ngIf="returDetails.controls.kd_brg.errors">Pelan2 bro, max 10 char ya</p>-->

            <label for="qty">Qty</label>
            <input type="text" placeholder="Qty" formControlName="qty"/>
            <!--<p *ngIf="returDetails.controls.kd_brg.errors">Pelan2 bro, max 10 char ya</p>-->

            <label for="pengaduan">Pengaduan</label>
            <input type="text" placeholder="Pengaduan" formControlName="pengaduan"/>
            <!--<p *ngIf="returDetails.controls.kd_brg.errors">Pelan2 bro, max 10 char ya</p>-->

            <label for="kd_lokasi">Kode Lokasi</label>
            <input type="text" placeholder="Kode Barang" formControlName="kd_lokasi"/>
            <!--<p *ngIf="returDetails.controls.kd_brg.errors">Pelan2 bro, max 10 char ya</p>-->

            <label for="gambar">Gambar</label>
            <input type="file" (change)="onChange($event)" />

            <label for="preview">Preview</label>
            <img [src]="fileupload">
          </div>
        </div>
      </div><br/>

      <button type="submit">Save Contact</button>
      <button type="button" (click)="deleteRetur(notrans.value)">Delete</button>
      <br/>

    </form>
<button (click)="add()">Add Detail</button>

诺莫尔·特拉克西
Pelan2 bro，最多10个字符



巴朗名单：

科德巴朗
数量
彭加丹
科德洛卡西酒店
甘巴尔
预览


保存联系人
删除


添加细节

每次我单击“添加细节”按钮，它都会为新行数据创建新的数组JSON，我将“添加细节”按钮放在表单外部，因为如果我将其放在表单中，表单会认为我单击并提交了

这是我的打字脚本代码：

  datareturForm: FormGroup;
  returDetails: FormArray;
  items: FirebaseListObservable<any[]>;
  fileupload: any;

  ngOnInit(){

    this.datareturForm = this.formBuilder.group({
      nomor_transaksi: ['', Validators.maxLength(20)],
      returDetails: this.bikinArray()
    })

  }

  bikinArray(): FormArray {
    this.returDetails = this.formBuilder.array([
      this.buildGroup()
    ]);
    return this.returDetails;
  }

  buildGroup(): FormGroup {
    return this.formBuilder.group({
      kd_brg:'',
      qty:'',
      pengaduan:'',
      kd_lokasi:'',
      gambar:''
    });
  }

  add() {
    this.returDetails.push(this.buildGroup());
  }

    onChange(input): void {



          // Create an img element and add the image file data to it
          var img = document.createElement("img");
          // var img:any = new Image();
          img.src = window.URL.createObjectURL(input.target.files[0]);

          // Create a FileReader
          var reader: any, target: EventTarget;
          reader = new FileReader();
          // var that = this;
          // Add an event listener to deal with the file when the reader is complete
          reader.addEventListener("load", (event) => {
              // Get the event.target.result from the reader (base64 of the image)
              img.src = event.target.result;

              // Resize the image
              var resized_img = this.resize(img,input.target.files[0].type);
              // that.cropper.setImage(img);
              // Push the img src (base64 string) into our array that we display in our html template
              this.fileupload=resized_img;


              // this.file=dataUrl;
              // var imgBlob = this.dataURItoBlob(this.file);
              // this.fileupload = imgBlob

          }, false);

          reader.readAsDataURL(input.target.files[0]);
        }

        resize (img, type, MAX_WIDTH:number = 700, MAX_HEIGHT:number = 700){

          var canvas = document.createElement("canvas");

          // console.log("Size Before: " + img.src.length + " bytes");

          var width = img.width;
          var height = img.height;

          if (width > height) {
              if (width > MAX_WIDTH) {
                  height *= MAX_WIDTH / width;
                  width = MAX_WIDTH;
              }
          } else {
              if (height > MAX_HEIGHT) {
                  width *= MAX_HEIGHT / height;
                  height = MAX_HEIGHT;
              }
          }
          canvas.width = width;
          canvas.height = height;
          var ctx = canvas.getContext("2d");

          ctx.drawImage(img, 0, 0, width, height);

          var dataUrl = canvas.toDataURL(type);  
          // IMPORTANT: 'jpeg' NOT 'jpg'
          // console.log("Size After:  " + dataUrl.length  + " bytes");
          return dataUrl
        }

datareturForm:FormGroup；
详细资料：格式；
项目：FirebaseListObservable

看，它是循环相同的图像，当我替换其中一个阵列图像时，其他图像也会不断更改相同的图像。我需要每一行都是不同的图像，我该怎么做

=============================================

更新
我只是更新了我的代码，就像@Fabio Antune的回答一样，我得到的是这个错误：

错误\u handler.js:45异常：无法设置的属性“picture”
undefinedErrorHandler.handleError@error_handler.js:45next@
应用程序参考js:273schedulerFn@
async.js:82SafeSubscriber.\uu tryOrUnsub@
Subscriber.js:223SafeSubscriber.next@
Subscriber.js:172Subscriber._next@Subscriber.js:125Subscriber.next@
Subscriber.js:89Subject.next@Subject.js:55EventEmitter.emit@
async.js:74onError@ng_zone.js:120onHandleError@
ng_zone_impl.js:64ZoneDelegate.handleError@zone.js:207Zone.runTask@
zone.js:139ZoneTask.invoke@zone.js:304错误处理程序.js:50原始
STACKTRACE:ErrorHandler.handleError@error\u handler.js:50next@
应用程序参考js:273schedulerFn@
async.js:82SafeSubscriber.\uu tryOrUnsub@
Subscriber.js:223SafeSubscriber.next@
Subscriber.js:172Subscriber._next@Subscriber.js:125Subscriber.next@
Subscriber.js:89Subject.next@Subject.js:55EventEmitter.emit@
async.js:74onError@ng_zone.js:120onHandleError@
ng_zone_impl.js:64ZoneDelegate.handleError@zone.js:207Zone.runTask@
zone.js:139ZoneTask.invoke@zone.js:304错误处理程序。js:51
TypeError:无法设置未定义的属性“picture”
在FileReader上。（附录组件ts:115）
在ZoneDelegate.invokeTask（zone.js:236）
在Object.onInvokeTask（ng_zone_impl.js:34）
在ZoneDelegate.invokeTask（zone.js:235）
在Zone.runTask（Zone.js:136）
在FileReader.ZoneTask.invoke（zone.js:304）errorhandleerror@error_handler.js:51next@
应用程序参考js:273schedulerFn@
async.js:82SafeSubscriber.\uu tryOrUnsub@
Subscriber.js:223SafeSubscriber.next@
Subscriber.js:172Subscriber._next@Subscriber.js:125Subscriber.next@
Subscriber.js:89Subject.next@Subject.js:55EventEmitter.emit@
async.js:74onError@ng_zone.js:120onHandleError@
ng_zone_impl.js:64ZoneDelegate.handleError@zone.js:207Zone.runTask@
zone.js:139ZoneTask.invoke@zone.js:304 app.component.ts:115 Uncaught
TypeError:无法设置未定义（…）的属性“picture”

以下是外观：

我认为它没有绑定到我的json树，对吗？如何装订？
我添加的html代码如下所示：

    <label for="gambar">Gambar</label>
    <input type="file" (change)="onChange($event,i)" formControlName="picture"/>

    <label for="preview">Preview</label>
    <img [src]="retur.picture">

Gambar
预览

但是什么也没发生，我还是犯了同样的错误，我试图在谷歌上搜索formBuilder/Responsive form handling，但它没有显示结果，这里需要帮助，不知道再搜索什么了
，因为我认为formBuilder/Responsive form中没有任何绑定函数，比如formControlName=“”在中，我确实从我的app.component.ts中注入了JSON手册，以下是我所做的：

在我的app.component.html中添加

    <label for="gambar">Gambar</label>
    <input type="file" (change)="onChange($event,i)" />

    <label for="preview">Preview</label>
    <img [src]="retur.value.picture">

Gambar
预览

请注意，我无法访问json值，只是不知道为什么，在朋友lol的帮助下，我做了很多尝试并出错

下面是我的app.component.ts：

  ngOnInit(){

    this.datareturForm = this.formBuilder.group({
      nomor_transaksi: ['', Validators.maxLength(20)],
      returDetails: this.bikinArray()
    })

  }

  bikinArray(): FormArray {
    this.returDetails = this.formBuilder.array([
      this.buildGroup()
    ]);
    return this.returDetails;
  }

  buildGroup(): FormGroup {
    return this.formBuilder.group({
      kd_brg:'',
      qty:'',
      pengaduan:'',
      kd_lokasi:'',
      namafile:'',
      picture: '',
      hasilImgBlob: ''
    });
  }

      add() {
        this.returDetails.push(this.buildGroup());
      }

onChange(input, index): void {

      // Create an img element and add the image file data to it
      var img = document.createElement("img");
      // var img:any = new Image();
      img.src = window.URL.createObjectURL(input.target.files[0]);

      //ambil nama file
      this.returDetails.controls[index].value.namafile=input.target.files[0].name;
      // console.log(this.namafile);

      // Create a FileReader
      var reader: any, target: EventTarget;
      reader = new FileReader();
      // var that = this;
      // Add an event listener to deal with the file when the reader is complete
      reader.addEventListener("load", (event) => {
          // Get the event.target.result from the reader (base64 of the image)
          img.src = event.target.result;

          // Resize the image
          var resized_img = this.resize(img,input.target.files[0].type);
          // that.cropper.setImage(img);
          // Push the img src (base64 string) into our array that we display in our html template
          this.fileupload=resized_img;

          this.returDetails.controls[index].value.picture=resized_img;

          var imgBlob = this.dataURItoBlob(this.fileupload);
          this.returDetails.controls[index].value.hasilImgBlob=imgBlob

          //ini kasi nama baru aja, terus nanti yg ini yg di save
          // this.hasilImgBlob[] = imgBlob
          //indexing gambar
          // this.returDetails[index].picture = resized_img;
          // console.info(index);

          // this.file=dataUrl;

      }, false);

      reader.readAsDataURL(input.target.files[0]);
    }

    //you need this function to convert the dataURI
    dataURItoBlob(dataURI) {
      var binary = atob(dataURI.split(',')[1]);
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      var array = [];
      for (var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], {
        type: mimeString
      });
    }

    resize (img, type, MAX_WIDTH:number = 700, MAX_HEIGHT:number = 700){

      var canvas = document.createElement("canvas");

      // console.log("Size Before: " + img.src.length + " bytes");

      var width = img.width;
      var height = img.height;

      if (width > height) {
          if (width > MAX_WIDTH) {
              height *= MAX_WIDTH / width;
              width = MAX_WIDTH;
          }
      } else {
          if (height > MAX_HEIGHT) {
              width *= MAX_HEIGHT / height;
              height = MAX_HEIGHT;
          }
      }
      canvas.width = width;
      canvas.height = height;
      var ctx = canvas.getContext("2d");

      ctx.drawImage(img, 0, 0, width, height);

      var dataUrl = canvas.toDataURL(type);  
      // IMPORTANT: 'jpeg' NOT 'jpg'
      // console.log("Size After:  " + dataUrl.length  + " bytes");
      return dataUrl
    }


    save():void{
        if(this.fileupload==undefined){
            //ini bagian, save tanpa image ke storage
              //this.items.push(this.profileData);
        }else{
              event.preventDefault();
              //loop si retur.control
              for(var i = 0; i < this.returDetails.length ; i++){

                // ini dapetin nama file image
                let namaFileEdited:string= new Date().getTime()+'-'+this.returDetails.controls[i].value.namafile;

                let storageRef: any = firebase.storage().ref();
                //ini lokasi storage u folder n nama nya apa
                let path: string = 'images/' + namaFileEdited;
                //ini fungsi, save ke storage, (image nya)

                 let uploadTask: any = storageRef.child(path).put(this.returDetails.controls[i].value.hasilImgBlob);

                  //ini progress nya
                  uploadTask.on('state_changed', (snapshot)=> {
                    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                      console.log('Upload is ' + progress + '% done');
                      switch (snapshot.state) {
                        case firebase.storage.TaskState.PAUSED: // or 'paused'
                          console.log('Upload is paused');
                          break;
                        case firebase.storage.TaskState.RUNNING: // or 'running'
                          console.log('Upload is running');
                          break;
                      }
                  }, (error) => {
                    //ini klo error
                    console.info('dafuq error bro');
                  }, () =>{
                    //ini completed
                    //ini ambil nama file, masukin ke json profiledata
                    this.datareturForm['namafile']=namaFileEdited;
                    //ini ambil link gambar di storage, masukin ke json profile data
                    this.datareturForm['picture']=uploadTask.snapshot.downloadURL;

                     //save ke database
                    this.items.push(this.datareturForm.value)
                  });
              }

        }

    }

ngOnInit（）{
this.datareturForm=this.formBuilder.group({
nomor_transaksi:[''，验证器。最大长度（20）]，
returDetails:this.bikinArray（）
})
}
bikinArray（）：FormArray{
this.returDetails=this.formBuilder.array([
this.buildGroup（）
]);
返回此。返回详细信息；
}
buildGroup（）：FormGroup{
返回此.formBuilder.group({
kd_brg:“”，
数量：''，
彭加杜万：，
杜杜洛卡西：“，
namafile:“”，
图片：''，
hasilImgBlob:'
});
}
添加（）{
this.returDetails.push（this.buildGroup（））；
}
onChange（输入，索引）：void{
//创建img元素并将图像文件数据添加到其中
var img=document.createElement（“img”）；
//var img:any=新图像（）；
img.src=window.URL.createObjectURL（input.target.files[0]）；
//ambil nama文件
this.returDetails.controls[index].value.namafile=input.target.files[0].name；
//console.log（this.namafile）；
//创建文件读取器
变量读取器：any，target:EventTarget；
reader=newfilereader（）；
//var=这个；
//添加事件侦听器，以便在读取器完成时处理该文件
reader.addEventListener（“加载”，（事件）=>{
//从读取器（图像的base64）获取event.target.result
img.src=event.target.result；
//调整图像大小
var resized\u img=this.resize（img，input.target.files[0].type）；