Как получить все изображения по строке таблицы, используя Angular

Question

Мне нужно получить все изображения в соответствии со строкой таблицы, используя Angular -8. Здесь у меня есть несколько изображений внутри одной ячейки в таблице. Я объясняю мой код ниже.

<tr *ngFor="let opt of ConfigArr; let i = index;">
   <td class="sticky-col first-col">
      {{opt.attrName1}}({{opt.attr1}})
   </td>
   <td class="sticky-col second-col">
      {{opt.attrName2}}({{opt.attr2}})
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add MRP" aria-label="MRP" [value]="opt.MRP">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add BaseUnitPrice" aria-label="BaseUnitPrice" [value]="opt.BaseUnitPrice">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add DiscountValue" aria-label="DiscountValue" [value]="opt.DiscountValue">
   </td>
   <td>
      <input class="form-control" class="form-control" matInput placeholder="MinBuyQty" aria-label="MinBuyQty" [value]="opt.MinBuyQty">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add MinimumPrice" aria-label="MinimumPrice" [value]="opt.MinimumPrice">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add TaxPercentage" aria-label="TaxPercentage" [value]="opt.TaxPercentage">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add TaxAmount" aria-label="TaxAmount" [value]="opt.TaxAmount">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add DiscountPrice" aria-label="DiscountPrice" [value]="opt.DiscountPrice">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add MaxBuyQty" aria-label="MaxBuyQty" [value]="opt.MaxBuyQty">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add MaximumPrice" aria-label="MaximumPrice" [value]="opt.MaximumPrice">
   </td>
   <td>
      <p>
         <mat-label>Front Image</mat-label>
         <ngx-mat-file-input placeholder="Front Image" #dfrImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
         <mat-icon matSuffix>image</mat-icon>
         <mat-label>Back Image</mat-label>
         <ngx-mat-file-input placeholder="Back Image" #dfrImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
         <mat-icon matSuffix>image</mat-icon>
      </p>
      <br>
      <p>
         <mat-label>Right Side Image</mat-label>
         <ngx-mat-file-input placeholder="Right Image" #dfrImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
         <mat-icon matSuffix>image</mat-icon>
         <mat-label>Left Side Image</mat-label>
         <ngx-mat-file-input placeholder="Left Image" #dfrImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
         <mat-icon matSuffix>image</mat-icon>
      </p>
   </td>
</tr>

Мой машинописный код приведен ниже.

for(let i=0; i< res['data']['Attributes'][this.ColumnNames[0]].length;i++){
   for(let j=0;j< res['data']['Attributes'][this.ColumnNames[1]].length;j++){
       let data = {
                  'attr1':res['data']['Attributes'][this.ColumnNames[0]][i],
                  'attrName1':attrName1,
                  'attr2': res['data']['Attributes'][this.ColumnNames[1]][j],
                  'attrName2': attrName2,
                  "MRP": '',
                  "BaseUnitPrice":'',
                  "DiscountValue": '',
                  "MinBuyQty":'',
                  "MinimumPrice":'',
                  "TaxPercentage":'',
                  "TaxAmount":'',
                  "DiscountPrice":'',
                  "MaxBuyQty":'',
                  "MaximumPrice":''
                }
                this.ConfigArr.push(data);
   }
}

Здесь у меня есть 4 изображения в каждой строке таблицы. Мне нужно, когда пользователь заполнит все входные значения изображениями и нажмет на любую кнопку, все загруженные изображения должны быть добавлены в массив ConfigArr согласно строке. Также эта загрузка изображений не открывает диск для выбора изображений.