How to use *ngFor for dynamic array in angular

Question

I need to loop through array of array in angular. *ngFor is working for main array, but it is not working for nested arrays. Below is the code

<div *ngFor="let filter_name of this.common.filters">
<div class="form-group col-md-12 mt-2">
<label for="assigned_to" class="modal_class ml-2">{{filter_name}}</label>
<select class="form-control select2 form-control-lg validate_input" id="assigned_to" name="assigned_to">
<option *ngFor="let options of this.common.filters.filter_name">{{options}}</option>
</select>
</div>
</div>

The name of nested array is dynamic and it is in filter_name variable

Answer 1

You can use something like this user inside get

<div formArrayName="productOption">
   <div *ngFor="let option of productOptionForm['controls'].productOption['controls']; let i=index">
      <div [formGroupName]="i">
         <div formArrayName="optionList">
            <div *ngFor="let listObj of option.get('optionList').controls; let j = index">
               <div [formGroupName]="j"> 
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 2

giving an example of persons with multiple addresses

  <div *ngFor="let person of persons"; let i=index>
<select class="form-control select2 form-control-lg validate_input" id="assigned_to" name="assigned_to">
          <option *ngFor="let address of person.addresses; let j=index">{{address.city}} 
          </option>
        </select>
        </div>
        </div>