Как заставить ngFor работать с вложенными вложенными массивами?

Question

У меня есть приложение Angular, над которым я работаю с компонентом, который должен отображать изображения выбранных файлов. Он отлично работает, если есть только одно изображение, но когда я использую массив (и на этот раз я использую реактивные формы), компонент, похоже, теряет все свои ДРУГИЕ ссылки, включая lis.

Вот код:

component.ts:

  import { Component, OnInit, Input, SimpleChanges, OnChanges} from '@angular/core';
  import { Field } from '../field'
  import { FormControl, FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
  import { report } from 'process';
  import { Fields } from '../Fields';
  import { AfterViewInit } from '@angular/core'

  @Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
  })
export class TableComponent implements AfterViewInit, OnChanges {
@Input() fields: Field[]
fieldStr: String
fieldNum: number
newStart: string;
//imgURLs: Array<any>;
reportArray: FormArray;
imgArrays: Array<Array<string>>
rows: number;
fieldz: Array<Field>;
high: number = 0;
low: number = 0;

reportForm = this.fb.group({
  imgURLs: this.fb.array([

  ]),
});

addImg(i: number, img: string) {
  this.imgArrays[i].push(img)
}

public imagePath;
imgURL: any;
public message: string;
indax: number = 0;

constructor(private fb: FormBuilder) {}

change(field: Field): void {
}

ngOnChanges(changes: SimpleChanges): void {
  //this.fields = changes['fields'].currentValue
  //this.newStart = changes['fields'].currentValue[0].time;
  if (changes['fields'].previousValue) {
    //changes from other component.
    this.fields = changes['fields'].currentValue;
    this.newStart = changes['fields'].currentValue[0].time;
    this.fieldz = Fields.getFields(this.fields)
    for (let i = 0; i < this.fields.length; i++) {
      if (this.fields[i].timeNum > this.high ) {
        this.high = this.fields[i].timeNum
      }
    }
    for (let i = 0; i < this.fields.length; i++) {
      if (this.fields[i].timeNum < this.low ) {
        this.low = this.fields[i].timeNum
      }
    }
    this.getRows()
  }
  this.imgArrays = Array<Array<string>>(this.rows)
}

getRows() {
  console.log("high is?", this.high)
  if (this.high > this.low) {
    this.rows = 24 - ((this.low - this.high) * .01);
  } else {
    this.rows = (this.high - this.low) * .01;
  }
  }

preview(files, i) {
  if (files.length === 0)
    return;

  var mimeType = files[0].type;
  if (mimeType.match(/image\/*/) == null) {
    this.message = "Only images are supported.";
    return;
  }
  var reader = new FileReader();
  this.imagePath = files;
  reader.readAsDataURL(files[0]); 
  reader.onload = (_event) => { 
    this.imgURL = reader.result;
    //this.addImg(i, this.imgURL)
    for (let each in this.imgURLs.controls) {
      var imgGroup = each
    }
    this.imgURLs.controls.push(this.fb.control(this.imgURL))
    this.imgURLs.controls.forEach(control => {
      console.log("IMAGE IS", control.value)
    })

  }
}

getStart() {
  return this.fields[0].time.toString();
}

getEnd(): String {
  return this.fields[this.fields.length].toString()
}

//lets push a FormGroup for each element in fields

get imgURLs() {
  return this.reportForm.get('imgURLs') as FormArray;
}

imgList = [];
//ngOnInit(): void {
  ngAfterViewInit(): void {

    this.reportForm = this.fb.group({
      imgURLs: this.fb.array([
  
      ]),
    });
    

  for (let i = 0; i < this.fields.length; i++) {
    if (this.fields[i].timeNum > this.high ) {
      this.high = this.fields[i].timeNum
    }
  }
  for (let i = 0; i < this.fields.length; i++) {
    if (this.fields[i].timeNum < this.low ) {
      this.low = this.fields[i].timeNum
    }
  }

  this.getRows()

  console.log('Sup. Before for loop');
  console.log("rows are", this.rows)
  for (let i = 0; i < this.rows; i++) {
    console.log("in forloop?")
    this.reportForm.get('imgURLs')
    this.imgURLs.push(this.fb.group({
      [this.imgList[i].name] : false
    }) //is the group an intance of imgList elemtn?
    );
  }
}

}

компонент. html

<div [formGroup]="reportForm">
<div formArrayName="imgURLs"> 
    <li *ngFor="let field of fields; let i = index">
        {{field.time}}<br>
        <textarea id="w3review" name="w3review" rows="4" cols="38" (change)="fieldNum = fieldNum + 1">
            Officer did something.
            </textarea>
            <div>
                <li *ngFor="let imgArray of imgURLs.controls.get('imgList[i].name'); let j=index">
                <h3>Angular 7 Image Preview before Upload:</h3>
                <span style="color:red;" *ngIf="message">{{message}}</span>
                <input #file type="file" accept='image/*' (change)="onChange()" 
(change)="preview(file.files,i)" />
                <img [src]="imgArray[j]" height="200">
                </li>
            </div>
        </li>
    </div>
</div>

Что я делаю не так? Конечно, ценю любую помощь.