如何循环遍历另一个FormArray中的formArray

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
})
export class DynamicFormComponent {
  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.dynamicForm = this.fb.group({
      outerFormArray: this.fb.array([
        this.fb.group({
          innerFormArray: this.fb.array([
            this.fb.control('Item 1'),
            this.fb.control('Item 2'),
          ]),
        }),
        this.fb.group({
          innerFormArray: this.fb.array([
            this.fb.control('Item 3'),
            this.fb.control('Item 4'),
          ]),
        }),
      ]),
    });
  }

  get outerFormArray(): FormArray {
    return this.dynamicForm.get('outerFormArray') as FormArray;
  }

  get innerFormArray(index: number): FormArray {
    return this.outerFormArray.at(index).get('innerFormArray') as FormArray;
  }
}

<form [formGroup]="dynamicForm">
  <div formArrayName="outerFormArray">
    <div *ngFor="let group of outerFormArray.controls; let i = index" [formGroupName]="i">
      <h3>Outer Group {{ i + 1 }}</h3>
      <div formArrayName="innerFormArray">
        <div *ngFor="let control of innerFormArray(i).controls; let j = index" [formControlName]="j">
          <input type="text" [value]="control.value">
        </div>
      </div>
    </div>
  </div>
</form>

<div *ngFor="let control of innerFormArray(i)?.controls; let j = index" [formControlName]="j">
  <input type="text" [value]="control?.value">
</div>