如何在另一个formArray中迭代字符串数组的formArray？

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

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="mainForm">
      <div formArrayName="stringArrays">
        <div *ngFor="let array of stringArrays.controls; let i = index">
          <div [formGroupName]="i">
            <div formArrayName="strings">
              <div *ngFor="let control of getStringsArray(i).controls; let j = index">
                <input type="text" [formControlName]="j">
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  `
})
export class ExampleComponent {
  mainForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.mainForm = this.fb.group({
      stringArrays: this.fb.array([])
    });

    const stringArrays = this.mainForm.get('stringArrays') as FormArray;

    // 迭代字符串数组的formArray
    const stringArray = ['string1', 'string2', 'string3'];

    const formArray = this.fb.array([]);
    stringArray.forEach(str => {
      formArray.push(new FormControl(str));
    });

    stringArrays.push(this.fb.group({
      strings: formArray
    }));
  }

  get stringArrays() {
    return this.mainForm.get('stringArrays') as FormArray;
  }

  getStringsArray(index: number) {
    return this.stringArrays.at(index).get('strings') as FormArray;
  }
}