1

我想提交一个包含 eventTitle 和多个图像的相册库。我可以使用 eventTitle 上传多张图片。问这个问题可能很愚蠢，但我是 Angular 的新手，这是我的第一个项目。卡住了这个问题。任何参考/文件都会有很大帮助。

提交表单时，我只需要传递图像和事件标题的 id 数组。我的 json 如下所示：

    {
        "eventTitle": "Event to be celebrate - Happy New Year..!!",
        "image": [
            {
                "id": 1
            },
            {
                "id": 2
            },
            {
                "id": 3
            }
        ]
    }

问题在于我无法推送 id 数组。只有最后上传的图像的 id 被推送。值得注意的是循环 id 并推入 formArray。有人可以帮我如何循环所有上传图片的ID吗？

// 我的 Gallery 组件 ts 文件：

    constructor(private fb: FormBuilder,
                  private http: HttpClient,
                  private gallaryService: GallaryService,
                  private fileService: FileService,
                  private renderer: Renderer2) {
        this.gallaryForm = this.fb.group({
          eventTitle: [''],
          image: this.fb.array([])

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

      initSocialProfiles() {
        return this.fb.group({
          id: ['']
        });
      }

 addGallaryImages() {
      const control = this.gallaryForm.controls.image as FormArray; // how to loop it ids of array
      const addrCtrl = this.initSocialProfiles();
      control.push(addrCtrl);
      console.log(addrCtrl);
  }

      gallaryFormSubmit() {   //submitting the form
        if (this.gallaryForm.valid) {
          const gallaryFormData = this.gallaryForm.value;
          gallaryFormData.image = [];
          gallaryFormData.image[0] = {};
          gallaryFormData.image[0].id = this.imageId;
          this.gallaryService.saveGallaryForm(gallaryFormData).subscribe((response) => {
            console.log(response);
            // this.dialog.closeAll();
            alert('New Gallary has been added...!');
          });
        }
      }

      onSelectedFile(event){
        if (event.target.files.length > 0){
          const image = event.target.files[0];
          const formData = new FormData();
          formData.append('file', image);
          this.fileService.saveFile(formData).subscribe(
            res => {
              console.log(res);
              if (res){
              this.uploadError = '';
              this.imageId = res.id;
              const li: HTMLLIElement = this.renderer.createElement('li');
              const img: HTMLImageElement = this.renderer.createElement('img');
              img.src = res.path;
              this.renderer.addClass(img, 'image');
              const a: HTMLAnchorElement = this.renderer.createElement('a');
              a.innerText = 'Remove';
              this.renderer.addClass(a, 'delete-btn');
              // a.addEventListener('click', this.deleteProductImage.bind(this, res.response.filename, a));

              this.renderer.appendChild(this.image.nativeElement, li);
              this.renderer.appendChild(li, img);
              this.renderer.appendChild(li, a);

              }
              else {
                this.uploadError = res.massage;
              }
            },
            err => this.error = err
          );
        }
      }

    Gallery Service:

      saveGallaryForm(gallary){
        return this.http.post<any>('http://localhost:8080/gallary/save', gallary)
          .pipe(
            retry(1),
            catchError(this.errorHandl)
          );
      }



    [![ In below console log, last uploaded image id is getting push. I need all uploaded image ids in this array.][1]][1]
4

0 回答 0