title: Populating an array iterating over an object in Angular 7
body: <p>I am trying to upload multiple files using third party ngx-file-drop component in my Angular 7 application. </p>
  
  <p>I am iterating through files object which is of the type <code>NgxFileDropEntry</code>. This object has only two properties called <code>fileEntry</code> and <code>relativePath</code>. While looping through the object however, I am able to assign <code>selectedDocumentItem</code> and <code>selectedDate</code> in HTML code. </p>
  
  <p>These properties are visible during runtime in the component while debugging, but complains at compile time. I had used the above approach so that I could save records when the user clicks the upload button as all values are available via the object. </p>
  
  <p>Before I can save the object, I need to populate the <code>uploadDocument</code> object with the values from the files object to pass it to the service.</p>
  
  <p>I am not able to populate the <code>uploadDocument</code> object. Any issues with my logic. Is there an alternative to for loop that I am using?</p>
  
  <pre><code>&lt;div class="upload-table"&gt;
      &lt;table id="table1" class="center"&gt;
  
          &lt;tbody class="upload-name-style"&gt;
              &lt;tr *ngFor="let item of files; let i=index"&gt;
                  &lt;td&gt; &lt;input kendoTextBox [(ngModel)]="item.relativePath" style="width: 350px" /&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;kendo-dropdownlist style="width:350px" [(ngModel)]="item.selectedDocumentItem" 
                          [data]="DocumentTypes" [defaultItem]="defaultItem" [filterable]="false" textField="Name"
                          valueField="Id"&gt;
                      &lt;/kendo-dropdownlist&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;kendo-datepicker style="width: 200px" [format]="'dd MMM, yyyy'"
                          [(ngModel)]="item.selectedDate"&gt;&lt;/kendo-datepicker&gt;
                  &lt;/td&gt;
                  &lt;td&gt; &lt;button class="btn btn-default" (click)="deleteRow(i)"&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;Delete
                      &lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>[{"relativePath":"Simplex - Copy - Copy.xlsx","fileEntry":{"name":"Simplex - Copy - Copy.xlsx","isDirectory":false,"isFile":true},"selectedDocumentItem":{"Id":6,"Name":"Constitutional Documents"},"selectedDate":"2019-07-09T23:00:00.000Z"},{"relativePath":"Simplex - Copy (2).xlsx","fileEntry":{"name":"Simplex - Copy (2).xlsx","isDirectory":false,"isFile":true},"selectedDocumentItem":{"Id":10,"Name":"Manager Letters"},"selectedDate":"2019-07-13T23:00:00.000Z"},{"relativePath":"Simplex - Copy.xlsx","fileEntry":{"name":"Simplex - Copy.xlsx","isDirectory":false,"isFile":true},"selectedDocumentItem":{"Id":7,"Name":"Regulation / References"},"selectedDate":"2019-07-30T23:00:00.000Z"}]
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>document: IDocument ;
  uploadDocument: IDocument[] = [];
  public files: NgxFileDropEntry[] = [];
  
    public createDocument() {
      console.log(this.files);
  
    this.files.forEach(element =&gt; {
  
          this.uploadDocument.forEach(doc =&gt; {
  
              doc.id = 5508,
              doc.documentTypeId = element.selectedDocumentItem.Id ,
              doc.name = element.relativePath,
              doc.documentDate = element.selectedDate
  
            });
  
  
      });
  </code></pre>
  
  <p>Attempted solution based on Darren's suggestion</p>
  
  <p>html</p>
  
  <pre><code> &lt;div class="upload-table"&gt;
          &lt;table id="table1" class="center"&gt;
  
  
  
              &lt;tbody class="upload-name-style"&gt;
                  &lt;tr *ngFor="let item of documents; let i=index"&gt;
                      &lt;td&gt; &lt;input kendoTextBox [(ngModel)]="item.fileDropEntry.relativePath" style="width: 350px" /&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;kendo-dropdownlist style="width:350px" [(ngModel)]="item.documentTypeId" 
                              [data]="DocumentTypes" [defaultItem]="defaultItem" [filterable]="false" textField="Name"
                              valueField="Id"&gt;
                          &lt;/kendo-dropdownlist&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;kendo-datepicker style="width: 200px" [format]="'dd MMM, yyyy'"
                              [(ngModel)]="item.documentDate"&gt;&lt;/kendo-datepicker&gt;
                      &lt;/td&gt;
                      &lt;td&gt; &lt;button class="btn btn-default" (click)="deleteRow(i)"&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;Delete
                          &lt;/button&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>    export interface IDocumentUpload {
          fileDropEntry: NgxFileDropEntry;
          id: number;
          name: string;
          documentTypeId: number;
          documentDate: Date;
      }
  
   documents : IDocumentUpload[] = [];
  
       public createDocument() {
              console.log(this.documents);
       }
  
  
   public dropped(files: NgxFileDropEntry[]) {
      this.files = files;
      for (const droppedFile of files) {
  
          // Is it a file?
          if (droppedFile.fileEntry.isFile) {
              const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
              fileEntry.file((file: File) =&gt; {
  
                  // Here you can access the real file
                  console.log(droppedFile.relativePath, file);
                  console.log('Hello');
  
                  /**
                  // You could upload it like this:
                  const formData = new FormData()
                  formData.append('logo', file, relativePath)
  
                  // Headers
                  const headers = new HttpHeaders({
                    'security-token': 'mytoken'
                  })
  
                  this.http.post('https://mybackend.com/api/upload/sanitize-and-save-logo', formData, { headers: headers, responseType: 'blob' })
                  .subscribe(data =&gt; {
                    // Sanitized logo returned from backend
                  })
                  **/
  
              });
          } else {
              // It was a directory (empty directories are added, otherwise only files)
              const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
              console.log(droppedFile.relativePath, fileEntry);
          }
      }
  }
  </code></pre>